CODEWITHSUNDEEP
javascriptreactjsdatahandler
Fetcgubgs
Fetcgubgs

Reputation: 107

How do I clear/reset input data in a react.js form?

I'm working on a React.js project. It's a project based on entering case study details. I'm trying to implement a cancel button that will clear the inputs and revert the user back to the first step in entering details.

The issue I'm having is, the page reverts back to the first step, but the input data is still there.

Input Details Aren't Cleared As Shown

The project uses data-handler APIs and the form is made up of multiple components. This is the current code I have for resetting inputs. Resetting the state didn't work.

  handleDetails = e => {
    e.preventDefault();
    this.props.handleEnterDetails();
    this.setState({clientName: ''})
  };

<Button type = "reset" value = "Reset" onClick={this.handleDetails}>Cancel</Button>

I apologize if this question seems incomplete, it is my first question and I tried following the guidelines. Thank you!

Upvotes: 0

Views: 207

Answers (2)

iamwebkalakaar
iamwebkalakaar

Reputation: 358

You just need to use clientName from state as value of that field input 

handleDetails = e => {
    e.preventDefault();
    this.props.handleEnterDetails();
    this.setState({clientName: ''})
  };

<input name="yourInputName" onChange={this.YourHandleChangeMethod} value={this.state.clientName} />
<Button type = "button" onClick={this.handleDetails}>Cancel</Button>

Upvotes: 1

Dipansh Khandelwal
Dipansh Khandelwal

Reputation: 626

Clearing state should have work. It actually depends if you have binded the inputs with the state or not. Can tell exactly, if you can share the complete file code.

Upvotes: 1

Related Questions