Mar 1, 2023 Author - Sai gowtham

React form handling tutorial

react3min read

In this tutorial, we are going to learn about how to handle the forms in react.

In HTML form elements like input , textarea and select they maintain there own internal state in the dom, but in react we are handling the state inside the components and updating the state using setState() method.

When a form element state is controlled by react,they are called controlled components.

Let’s look into the examples.

Input element

class Login extends React.Component {
  state = {
    username: "",
    password: ""
  };

  handleSubmit = e => {
    e.preventDefault();
    console.log(this.state);
  };
  handleUsername = e => {
    this.setState({
      username: e.target.value
    });
  };
  handlePassword = e => {
    this.setState({
      password: e.target.value
    });
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input
          type="text"
          value={this.state.username}
          placeholder="Username"
          onChange={this.handleUsername}
        />
        <input
          type="password"
          value={this.state.password}
          placeholder="Password"
          onChange={this.handlePassword}
        />
        <button type="submit">Login</button>
      </form>
    );
  }
}

There is a Login Component with two input fields username and password where we added an onChange event handler to update the react state on every keystroke.

When a User clicks on a login button we are logging the data in the console or you can send a data to your backend.

Textarea element

In react we are assigning a state to the value attribute present inside the textarea element by using the onChange event handler we are updating the state it is similar to the input element.

example:

class Comments extends React.Component {
  state = {
    comment:""
  };

  handleSubmit = e => {
    e.preventDefault();
    console.log(this.state);
  };

  handleComment = e => {
    this.setState({
      comment: e.target.value
    });
  };


  render() {
    return (
      <form onSubmit={this.handleSubmit}>
       <textarea value={this.state.comment}
         onChange={this.handleComment}/>
        <button type="submit">Comment</button>
      </form>
    );
  }
}

In the above code we have added an onChange handler, to the textarea element to update the comment property defined inside the state object.

Select element

The select element in the HTML is used to create a dropdown list.

Let’s see an example.

class ChooseFramework extends React.Component {
  state = {
    framework: "vue"
  };

  handleSubmit = e => {
    e.preventDefault();
    console.log(this.state.framework);
  };

  handleChange = e => {
    this.setState({
      framework: e.target.value
    });
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <h2>Choose your framework</h2>
        <select onChange={this.handleChange} value={this.state.framework}>
          <option value="react">React</option>
          <option value="angular">Angular</option>
          <option value="vue">Vue</option>
        </select>
        <button type="submit">Submit</button>
      </form>
    );
  }
}

Here we added an onChange handler and value attribute to the select element.

The option elements are nested inside the select element, there is a value attribute in each option element which is holding the data.

When we select a particular option the this.state.framework property value is updated with the option attribute value. Like in the below image we selected angular framework so that angular is logged inside the console.