Categories
React Answers

How to Clear an Input Value After Form Submit in a React Component?

Spread the love

Sometimes, we want to clear an input value after form submit in a React component.

In this article, we’ll look at how to clear an input after form submit in a React component.

Clear an Input Value After Form Submit in a React Component

We can clear an input value after form submit in a React component.

To do that, we write:

onHandleSubmit(e) {
  e.preventDefault();
  const name = this.state.name;
  this.props.searchByName(name);
  this.setState({
    name: ''
  });
}

We call preventDefault to stop the default submit behavior.

Then we get the name from the state which is what we inputted.

Then we call our search function.

And finally, we clear the input value by clearing the name state by assigning it an empty string.

Conclusion

We can clear an input value after form submit in a React component.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *