How to clean input fields after another operations in a function in React?

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 ?

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

Advertisement

Answer