How To Create Forms in React

Just like we use Forms in HTML, we can use the same thing to React. It’s quite different from other DOM elements but not too complex. 

Unlike HTML, in react, you will have to use controlled components. It’s just a way to have the javascript function after the form. The function will handle the submission part and will also have access to the form. 

Handling Forms

In HTML, the forms are handled with DOM whereas controlled components will handle the data when comes to react. 

For example, all the data is stored in a “state” (without quotes). Further, to control and change the attributes, one can use the “onChange” attribute. 

The code example for the state will be as follows.

this.state = { firstname: '' };

This is how one can collect the data from the user and get it right there in the React. 

In the same way, if one wants to update state, one can use event handler “onChange”.

myChangeHandler = (event) => {
    this.setState({firstname: event.target.value});
  }

Now, to execute it, one can use following code. 

<input
        type='text'
        onChange={this.myChangeHandler}
      />

Of course, it’s not the complete code but just an explanation of how component handling works in React. 

Conditional Rendering

One of the best things about React is that one can also use conditional rendering. Here, we can create an empty header. Later on, we can set an “if” condition on whether the user has entered any input for the given field or not.

If the user has entered the value, one can use it to display the header. This is usually used to greet people at the top. 

The example code for this would look something like this. 

This is how we can create an empty variable. 

this.state = { firstname: '' };

If the person enters the iput, we can use the if statement to display the output in the header or at any place.

if (this.state.username) {
      header = <h1>Hello {this.state.firstname}</h1>;
    } else {
      header = '';
    }

One can surely use different types of conditions depending on the situation. 

Tags in React Forms

Not to mention, there are some of the tags that you can use which are as follows. 

Text area:

<textarea>

</textarea>

Select tag:

<select> <option……/option> </select>

File Input:

<input type=”file”/>

Multiple Inputs

React also allows you to handle multiple inputs on the form with ease. Here is how you can do it. 

First of all, we will have to add a “name” attribute to all the elements. Thereafter, we can use “event.target.name.” to call out the names and let the function handle it. 

Final Words

This is how you can use forms to React. You can also use Formik to build forms. It’s recommended in the official documentation too. For more information about the form creation in React, you can refer to the docx. However, you can only learn if you practice more instead of just reading things. So, you can try creating a form to React and see how it goes for you.