Form handling is a little bit different with React. An HTML form will navigate to the next page when it is submitted. A common case is that we want to invoke a JavaScript function that has access to form data after submission and avoid navigating to the next page. We already covered how to avoid submit in the previous section using preventDefault(). 

Let's first create a minimalistic form with one input field and the submit button. To be able to get the value of the input field, we are using the onChange event handler. When the value of the input field is changed, the new value will be saved to state. The this.setState({text: event.target.value}); statement gets the value from the input field and saves it to the state called text. Finally, we will show the typed value when a user presses the submit button. The following is the source code for our first form:

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {text: ''};
  }

  // Save input box value to state when it has been changed
  inputChanged = (event) => {
    this.setState({text: event.target.value});
  }

  handleSubmit = (event) => {
    alert(`You typed: ${this.state.text}`);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input type="text" onChange={this.inputChanged} 
            value={this.state.text}/>
        <input type="submit" value="Press me"/>
      </form>
    );
  } 
}

The following is a screenshot of our form component after the Submit button has been pressed:

Now is a good time to look at the React Developer Tools, which are handy tools for debugging React apps. If we open the React Developer Tools with our React form app and type something into the input field, we can see how the value of the state changes. We can inspect the current value of  both props and state. The following screenshot shows how the state changes when we type something into the input field:

Typically, we have more than one input field in the form. One way to handle multiple input fields is to add as many change handlers as we have input fields. But this creates a lot of boilerplate code, which we want to avoid. Therefore, we add the name attributes to our input fields and we can utilize that in the change handler to identify which input field triggers the change handler. The name attribute value of the input field must be the same as the name of the state where we want to save the value.

The handler now looks like the following. If the input field that triggers the handler is the first name field, then event.target.name is firstName and the typed value will be saved to a state called firstName. In this way, we can handle all input fields with the one change handler:

 inputChanged = (event) => {
    this.setState({[event.target.name]: event.target.value});
  }

The following is the full source code of the component:

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {firstName: '', lastName: '', email: ''};
  }

  inputChanged = (event) => {
    this.setState({[event.target.name]: event.target.value});
  }

  handleSubmit = (event) => {
    alert(`Hello ${this.state.firstName} ${this.state.lastName}`);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>First name </label>
        <input type="text" name="firstName" onChange={this.inputChanged} 
            value={this.state.firstName}/><br/>
        <label>Last name </label>
        <input type="text" name="lastName" onChange={this.inputChanged} 
            value={this.state.lastName}/><br/>
        <label>Email </label>
        <input type="email" name="email" onChange={this.inputChanged} 
            value={this.state.email}/><br/>
        <input type="submit" value="Press me"/>
      </form>
    );
  } 
}

The following is a screenshot of our form component after the Submit button has been pressed: