How to Clear the Form After Submitting in React

These days, websites have to compete with each other to capture users’ attention. Users don’t want to think too hard about figuring out how to use an application.

Choosing React as your framework is a good start because React apps are blazing fast.

Clear the Form After Submitting in React

Most React applications use forms in one way or another. Even though React is based on JavaScript, forms in React web applications are handled differently than in other frameworks or native JavaScript.

You need to know some React-specific details to successfully implement forms in React.

This article will discuss the use case when you need to clear the form’s contents after it is submitted. For example, if users have to submit a to-do task, once it is filled out and submitted, the form should be cleared so that users can start typing in a clean slate.

Controlled Components

Before we discuss how to clear forms once they are submitted, we should explain the concept of controlled components. This is when the state controls the value of the input.

For instance, we can set the onChange event handler for <text> input to update the state every time the user enters or deletes a new letter.

We will have to clear user inputs currently submitted in the state when submitting the form. This doesn’t mean that we will delete the entire state, only the temporary text field values tied to the state.

Example of Clearing Form After Submit

This is a simple example where we clear the form after submitting it.

import "./styles.css";
import { useState } from "react";
export default function App() {
  const [name, setName] = useState("");
  const [names, setNames] = useState([]);
  const handleChange = (e) => {
    setName(e.target.value);
  };
  const handleClick = () => {
    setNames([...names, name]);
    setName("");
  };
  return (
    <div className="App">
      <p>Enter a name</p>
      <input type="text" value={name} onChange={(e) => handleChange(e)}></input>
      <br></br>
      <br></br>
      <button onClick={() => handleClick()}>Add Name</button>
      {names.map((name) => (
        <h1>{name}</h1>
      ))}
    </div>
  );
}

As you can see in this live demo, we have a simple text input where users are supposed to enter their names. We also have a button labeled Add Name.

Every time the user enters a name in the field and clicks the button, that name will be displayed in the list, and the input field will be cleared.

We use the useState() hook to create two state variables: name and names and corresponding functions for updating them.

The value of the name state variable will be tied to the input field. Any new letter entered into the field will update the value of the name state variable.

The names state variable will be initialized as an empty array. We will set up the handleClick event handler so that every time the user clicks that button, the current value entered into the text field will be added to the array.

Most importantly, in the handleClick() function, we will use the setName() function to reset the value of the name state variable to an empty string. Since the value in the text input field is tied to the state variable, it will be empty (to reflect an empty string).