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

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 ?

CodePudding user response：

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

CodePudding user response：

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

CodePudding user response：

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.