Warning: You provided a `value` prop to a form field without an `onChange` handler in react JS-CodePudding

I am using POP Up Modal form .Unable to change input value it goes into read only mode and showing Warning: You provided a value prop to a form field without an onChange handler in react JS. Below I am sharing code. Please guide me where ia m doing wrong.

const handleInput = (e) => {
      setName(e.target.value)
   }

     <Modal show={showed}  size="lg" onHide={handleContactClose} aria-labelledby="example-modal-sizes-title-lg" centered scrollable  backdrop="static">
        
            <Modal.Header closeButton className='form-header'>
                <Modal.Title className='modal-heading contacts-model'>Add New Contact</Modal.Title>
             </Modal.Header>
              <Modal.Body className='contacts-form-body'>
          
             <Row className="mb-3">
                  <Form.Group as={Col} controlId="formPersonNgame" >
                    <Form.Label className='all-contacts-labels' >Person's Name</Form.Label>
                  
                    <Form.Control className='input-text-placeholders' name="name" type="text" placeholder="Person's Name" onChange={ (e) => {handleInput(e)}}  />
                  </Form.Group>
                  <Form.Group as={Col} controlId="formCompanyName">
                    <Form.Label className='all-contacts-labels'>Company Name</Form.Label>
                    <Form.Control className='input-text-placeholders' type="text" placeholder="Company Name" onChange={handleCompanyName}/>
                  </Form.Group>
             </Row>
     </Modal.Body>
              <Modal.Footer className='form-header'>
                <Button variant="secondary" onClick={handleContactClose}>
                  Close
                </Button>
                <Button variant="primary" type="submit" >
                  Save Changes
                </Button>
              </Modal.Footer>

CodePudding user response：

There is no value field in Form.Control.

<Form.Control className='input-text-placeholders' name="name" type="text" placeholder="Person's Name" value={name} onChange={ (e) => {handleInput(e)}}  />

CodePudding user response：

From what I can tell, you already are binding a handler to the form control,

function foo()=>{
let [myvalue,setmyvalue] = useState();

handler(e){
// do stuff and call setmyvalue
// this triggers a rerender
}

return(<input value={myvalue} onChange={handler}>)

}

you were correctly invoking your onChange handler, but weren't binding your value from useState to the form control