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.
Specific Examples
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.