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 ?
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
Maybe you could use a state hook to track the server response.
If valid response then send back true and trigger reset text-fields function
Without seeing your service code, I am not sure I can 100% guarantee any of this advice. But it seems to me that you should be doing that work in a .then() or a .finally()
for example:
const addNewCustomer = async (name, surname) => {
await service.addCustomer(name, surname)
.then(() => {
props.funcParam();
setFirstName('');
setLastName('');
})
};
You could also do this in a .finally if you want to to execute regardless of the results from the server.