Skip to content

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);

    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(}></input>
                    <input type="text" placeholder="Last Name" defaultValue={lastName} onChange={e => setLastName(}></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>



export default TableFooterPanel;

Here everything is working good except


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(} />
<input type="text" placeholder="Last Name" value={lastName} onChange={e => setLastName(} />

From docs: