How to write condition to Input tag in React

Question

I am working on React project, In that project I have a scenario that is I have to write

Condition for Input tag. The Condition wants to be like this, In my form the Input tag type is

Number, and its min Value is 1001 and max value is 1500. So now what I want is If I type number

Less than 1001 then it should not take that number in Input tag. Someone please help me how to

Write logic like this.

This is Form.js

import React from 'react';
import './aum-company-modal.css';
import { Button, Col, Modal, ModalBody, ModalFooter, ModalHeader, Row, FormGroup, Label, Input, } from 'reactstrap';

const AumCompanyModal = () => {
    return (
        <Row>
            <Col md="6" sm="6" xs="6">

                <Modal isOpen
                >
                    <ModalHeader >Add new</ModalHeader>
                    <ModalBody>
                        <Row>
                            <Col md="12" sm="12" xs="12">
                                <FormGroup>
                                    <Label for="exampleName">Min Value</Label>
                                    <Input
                                        type="text"
                                        name="roleName"
                                        placeholder="Enter minimum value"
                                        value='1000'

                                    />
                                </FormGroup>
                                <FormGroup>
                                    <Label for="exampleName">Max Value</Label>
                                    <Input
                                        type="number"
                                        name="roleName"
                                        placeholder="Enter maximum value"
                                        min='1001' max='1500'
                                    />
                                </FormGroup>
                            </Col>

                        </Row>


                    </ModalBody>
                    <ModalFooter>
                        <Button  color="secondary">
                            Cancel
                </Button>
                        <Button type="submit" color="primary">
                            Submit
                </Button>
                    </ModalFooter>
                </Modal>
            </Col>
        </Row>
    )
}

export default AumCompanyModal

Carlos Saiz Orteu · Accepted Answer · 2020-04-16 09:01:33Z

1

You input does not have a value property so I would suggest you to make an state to use it as value and the set an onChange which is a function that checks that just like this:

const [ inputValue, setInputValue ] = useState(1000);

handleChange = (e) => {
    if (e.target.value > 999 && e.target.value < 1501) {
        setInputValue(e.target.value);
    }
}

<Input
    type="number"
    name="roleName"
    placeholder="Enter maximum value"
    min='1001' max='1500'
    onChange={handleChange}
    value={inputValue}
/>

answered Apr 16, 2020 at 9:01

Carlos Saiz Orteu

1,8151 gold badge13 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Vamsi Over a year ago

Hi @Carlos Saiz Orteu your code is working fine, but I want some small change from your code, that is For Example, If I want to enter 1400 hundred means I have to click the increment button so many times so user may feel uncomfortable. So what I want is User can directly enter the number in the input tag, but we have to put condition like this if the number is less than 1001 then Inputag should not take that number and also If the number is greater than 1500 then also Input tag should not take the number

Carlos Saiz Orteu Over a year ago

If you want to control it this way you should control this on submit. Just make an onClick in the button for submit and check if the state you created is between the numbers you want. If it is not, show an alert, an error or whatever you need to. Also if I have helped you make sure to leave a vote in my answer!

Collectives™ on Stack Overflow

How to write condition to Input tag in React

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related