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

Question

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!

Answer 1

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.

Answer 2

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>