If the user has to fill out a form multiple times, it’s a good idea to reset form after they submit it. Like so:

In this article, we will show how to improve User Experience by clearing the form once it is submitted.

We will show how to reset individual input fields as well as the entire form after user submits it.

How to reset input in React after submit

In React, it’s a good practice to set the value parameter of React input elements equal to values from the state.

<input
     value={address}
     onChange={(e) => setAddress(e.target.value)}
 ></input>

In this case, the <input> element is called a controlled component.

The value in the field comes from the state. To change the value in the field, you need to update the state variable. Therefore you can clear a textbox by setting its value to an empty string.

Usually, when the <input> field is first loaded, it’s empty for the user to fill in. Therefore the initial value attribute needs to be set to an empty string.

In these examples, value of the input field is set to address state variable. To reset the input, all you need to do is set the address variable to an empty string.

Once the user finished typing and wants to submit, you can define the onSubmit or onClick event handlers to reset input in React. In other words, set the state to an empty string.

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

Note that clicking the ‘Save’ button updates the address state variable to an empty string.

Since input react element gets its value from the state variable, it will reset to an empty state. This is how to clear textbox in React js.

How to clear form after submit in React

Now that we’ve seen how to reset an individual input field, let’s see how to clear an entire form with multiple inputs.

Resetting form on submit follows the same principle as doing it for an individual input field, with few small differences.

Step 1 : Set up the form

We create a <form> React element that wraps around multiple <input> textboxes. Each of them get their value from state variables, like in the example above.

Let’s imagine we have four fields: one for full name, address, phone number, and occupation. We will use the useState() hook to initialize state variables for each field.

When you want to clear form after submit in React, simply call setAddress and similar updater functions to reset these state variables to empty strings.

All of the components will derive their value from state variables, so setting them to an empty strings will reset form on submit.

const [address, setAddress] = useState("");
const [fullName, setFullName] = useState("");
const [number, setNumber] = useState("");
const [occupation, setOccupation] = useState("");

As previously mentioned, all <input> fields must be controlled.

We set the value attribute of each <input> element to assign them initial values from state variables.

We also set the onChange event handler to update the value of state variables.

<label>Your full name:</label>
<input
	value={fullName}
	onChange={(e) => setFullName(e.target.value)}
></input>
<br />
<label>Your address:</label>
<input
	value={address}
	onChange={(e) => setAddress(e.target.value)}
></input>
<br />
<label>Phone number:</label>
<input
	value={number}
	onChange={(e) => setNumber(e.target.value)}
></input>
<br />
<label>Your occupation</label>
<input
	value={occupation}
	onChange={(e) => setOccupation(e.target.value)}
></input>
<button type="submit">Save</button>

This way, users entering values into input fields will trigger the onChange event handler and update address, fullName, number and occupation state variables.

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

<form onSubmit={(e) => handleSubmit(e)}>
     ..inputs
     <button type="submit">Save</button>
</form>

Look at the <form> React element.

We set the onSubmit attribute to execute the handleSubmit event handler after users click the submit form.

Step 2 : Event handler to clear form after submit in React

Now let’s take a look at the event handler that actually resets all input fields in the form:

const handleSubmit = (e) => {
    e.preventDefault();
    setRecords([...records, { address, fullName, number, occupation }]);
    setAddress("");
    setFullName("");
    setNumber("");
    setOccupation("");
  };

First we need to stop the page from refreshing. e.preventDefault() stops the browser’s default response to submitting a form – refreshing the page.

Next, we take existing values of address, fullName, number, and occupation state variables and add them to the records array in object format. Each item in the records array will look like this:

{
    address: address,
    fullName: fullName,
    number: number,
    occupation: occupation
}

We use the spread notation to make sure we don’t lose existing records.

Once we store all the user-entered values in the records array, it’s safe to clear all inputs in the form.

To do that, we reset all state variables to an empty string.

This is how to clear form after submit in React.

Just to recap: the handleSubmit is called every time user submits the form, and user input values are tied to state variables.

Calling the handleSubmit stores user entered values, resets state variables, and clears the form.

Example of how to reset form on Submit

Here’s a full code of the component:

import "./styles.css";
import { useState } from "react";
export default function App() {
  const [address, setAddress] = useState("");
  const [fullName, setFullName] = useState("");
  const [number, setNumber] = useState("");
  const [occupation, setOccupation] = useState("");
  const [records, setRecords] = useState([]);
  const handleSubmit = (e) => {
    e.preventDefault();
    setRecords([...records, { address, fullName, number, occupation }]);
    setAddress("");
    setFullName("");
    setNumber("");
    setOccupation("");
  };
  return (
    <div className="App">
      <form onSubmit={(e) => handleSubmit(e)}>
        <label>Your full name:</label>
        <input
          value={fullName}
          onChange={(e) => setFullName(e.target.value)}
        ></input>
        <br />
        <label>Your address:</label>
        <input
          value={address}
          onChange={(e) => setAddress(e.target.value)}
        ></input>
        <br />
        <label>Phone number:</label>
        <input
          value={number}
          onChange={(e) => setNumber(e.target.value)}
        ></input>
        <br />
        <label>Your occupation</label>
        <input
          value={occupation}
          onChange={(e) => setOccupation(e.target.value)}
        ></input>
        <br />
        <button type="submit">Save</button>
      </form>
      {records.map((record) => {
        return (
          <div style={{ marginTop: "50px" }}>
            <p>Full name: {record.fullName}</p>
            <p>Address: {record.address}</p>
            <p>Phone number: {record.number}</p>
            <p>Occupation: {record.occupation}</p>
          </div>
        );
      })}
    </div>
  );
}

You can check out the full React component code and live demo on CodeSandbox.

Even though clicking the submit button clears the form, user entered values are stored in the state.

We use the .map() method to go over user submitted values and render them.