Author -  Sai gowtham

React form handling tutorial

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.

react form input element

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.

textarea form element

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.

react select element

Css Tutorials & Demos

How rotate an image continuously in CSS

In this demo, we are going to learn about how to rotate an image continuously using the css animations.

How to create a Instagram login Page

In this demo, i will show you how to create a instagram login page using html and css.

How to create a pulse animation in CSS

In this demo, i will show you how to create a pulse animation using css.

Creating a snowfall animation using css and JavaScript

In this demo, i will show you how to create a snow fall animation using css and JavaScript.

Top Udemy Courses

JavaScript - The Complete Guide 2023 (Beginner + Advanced)
JavaScript - The Complete Guide 2023 (Beginner + Advanced)
116,648 students enrolled
52 hours of video content
$14.99 FROM UDEMY
React - The Complete Guide (incl Hooks, React Router, Redux)
React - The Complete Guide (incl Hooks, React Router, Redux)
631,582 students enrolled
49 hours of video content
$24.99 FROM UDEMY
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
203,937 students enrolled
31.5 hours of video content
$14.99 FROM UDEMY