I have a button and 2 input field and I am sending these input field values to backend. etc doing some operations. After doing operations in addCustomer function, I want to reset input fields but it is not working. Here is the code:
function TableFooterPanel(props) { const [firstName, setFirstName] = useState(''); const [lastName, setLastName] = useState(''); const addNewCustomer = async (name, surname) => { await service.addCustomer(name, surname); props.funcParam(); setFirstName(''); setLastName(''); } var isButtonDisabled = false; (firstName.length <= 3 || lastName.length <= 3) ? isButtonDisabled = true : isButtonDisabled = false; return ( <> <Card className='buttonFooter'> <Form className='buttonFooter'> <input type="text" placeholder="First Name" defaultValue={firstName} onChange={e => setFirstName(e.target.value)}></input> <input type="text" placeholder="Last Name" defaultValue={lastName} onChange={e => setLastName(e.target.value)}></input> <Button disabled={isButtonDisabled} onClick={() => addNewCustomer(firstName, lastName)} className='addButton'>Add</Button> <label hidden={!isButtonDisabled} className='labelStyle'>Field lengths must be at least 4 character</label> </Form> </Card> </> ); } export default TableFooterPanel;
Here everything is working good except
setFirstName(''); setLastName('');
they are not resetting or setting to another value. What is the reason for that and how can I achieve it ?
Advertisement
Answer
The problem is that you’re setting the defaultValue prop and not the value prop.
<input type="text" placeholder="First Name" value={firstName} onChange={e => setFirstName(e.target.value)} /> <input type="text" placeholder="Last Name" value={lastName} onChange={e => setLastName(e.target.value)} />
From docs: https://reactjs.org/docs/forms.html#controlled-components