ReactJS Forms

In this tutorial you will learn about the ReactJS Forms and its application with practical example.

ReactJS Forms

Forms are integral part of any modern website or application. The forms are mainly used to allow users to interact with the application and it gives application a way to gather information from its users. Forms can be used to perform many tasks depending upon the nature of your business requirement and logic such as – user authentication, searching and filtering of products, booking a product/service, order submission etc.

Creating a Form

When it comes to form-building, React offers a stateful, reactive approach for form building. In React, the form data is usually handled by the component rather than the DOM, and is usually implemented using controlled components.

Uncontrolled Component

The traditional HTML forms has the default HTML form behavior, the form data is usually stored in DOM. The HTML Elements like <input>, <select>, and <textarea> maintains their own state, which is updated when the input value changes. and input field value can be accessed using using a ref.

Example:-

Here, when form is submitted the form data being sent to another page request

Controlled Components

In controlled component the form data is usually handled by the component rather than the DOM, the container component is responsible to maintain the state.

In controlled component callback functions being used to handle form events and to maintain forms data using components local state. This way component have better control over the form elements and the form data.

Example:-

Step 1:- Let’s open src/App.js, delete the existing code and put the following code in it and save it.

Step 2:- Let’s open the terminal again, change directory to your project folder and type the following command in order to run the server.

Step 3:- Now open the following URL in browser to view the output

http://localhost:3000

Step 4:- You will see the following screen.

Screen 1:-

Screenshot_2

Screen 2:-

Screenshot_3

In this tutorial we have learn about the ReactJS Forms and its application with practical example. I hope you will like this tutorial.