Let’s explore how to clear forms after they are submitted.

Clear input after submit

React docs recommend binding values of input elements to the state. 

const [address, setAddress] = useState("");
<input
     value={address}
     onChange={(e) => setAddress(e.target.value)}
 ></input>

Such <input> elements are called controlled components. Because they get their value from the state.

We can reset an input field by resetting the respective state value to an empty string or null.

Let’s look at an example:

export default function App() {
  const [address, setAddress] = useState("");
  return (
    <div className="App">
      Your address:
      <input
        value={address}
        onChange={(e) => setAddress(e.target.value)}
      ></input>
      <button onClick={() => setAddress("")}>Save</button>
    </div>
  );
}

Clicking the ‘Save’ button sets address state variable to an empty string. Input field gets its value from the state, so it will be empty as well.

Clear form after submit in React

We can clear the form the same way we reset an individual input field. The only difference is that there are multiple fields to reset.

Step 1 : Initialize state

As we already know, <input> elements get their values from the state.

Let’s imagine we have four input fields: full name, address, phone number, and occupation. We can store their values in four state variables.

However, it’s better to initialize one state variable – an object where each property corresponds to each field. Let’s name it formValues.

const [formValues, setFormValues] = useState({
    fullName: "",
    address: "",
    number: "",
    occupation: ""
  });

Step 2: Create the form

<input> fields should get values from the formValues object.

Whenever user something into the field, we want to update respective property of the formValues object. To do that, we can define the onChange event handler. 

<form onSubmit={(e) => handleSubmit(e)}>
        <label>Your full name:</label>
        <input
          value={formValues.fullName}
          onChange={(e) =>
            setFormValues({ ...formValues, fullName: e.target.value })
          }
        ></input>
        <br />
        <label>Your address:</label>
        <input
          value={formValues.address}
          onChange={(e) =>
            setFormValues({ ...formValues, address: e.target.value })
          }
        ></input>

        <button type="submit">Save</button>
      </form>

In the onChange event handler, we copy existing key-value pairs from the formValues object. We only change one property – value of the input field we are listening to.

If onChange is set on address field, we update address property to current value in the field.

At the end of the form, we have a <button> that submits the form.

Step 3: Handle submit

Next, we need to handle submit. Our handleSubmit() function should:

  1. Save user inputs.
  2. Clear all input fields.

To save user inputs, we need to create an array, which is going to hold submitted form values. In other words, clicking the submit button should add current formValues object to the array.

const handleSubmit = (e) => {
    e.preventDefault();
    setRecords([...records, formValues]);
  };

In this example, we use a spread operator to copy current values of the records array, and add current formValues object to the array.

Once inputs are saved, we can reset the form. Simply call setFormValues and set every property to an empty string.

const handleSubmit = (e) => {
    e.preventDefault();
    setRecords([...records, formValues]);
    setFormValues({
      fullName: "",
      address: "",
      number: "",
      occupation: ""
    });
  };

Input fields will be cleared as well, because they get their value from the formValues object.

Just to recap: We set onSubmit to handleSubmit , a function that saves current entered values and then clears all values in the form.

Every time user clicks to submit the form, handleSubmit function saves current values and then clears the form.

Final code

Check out live demo on CodeSandbox, where you can change code and see the results.

UX