In React, Form handling is one of the basic and important concepts that every developer should learn about. Forms are used to collect the data so that we can use the data for various purposes. This article, lets us understand form handling in React along with examples.

Prerequisites:

Form Attributes in React:

• input: The ‘<input>’ tag allows users to enter the form data in various forms including text, radio, button, and checkbox, etc.
• label: The ‘<label>’ tag represents the label of the particular input field.
• onChange: The onChange is an attribute of ‘<input>’ tag, which is being triggered by a change in the particular input tag and calls the respective handler method.

Steps to Create React Application And Installing Module:

Step 1: Create a React application using the following command:

npx create-react-app form-demo

Step 2: After creating your project folder i.e. form-demo, move to it using the following command:

cd form-demo

Step 3: After setting up the react environment on your system, we can start by creating an App.js file and create a directory by the name of components in which we will write our desired function.

Project Structure:

project structure

The updated dependencies in package.json file will look like:

"dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
}

Approach to handle forms in React:

• Initialization:
  • This part consists of Initializing the variables and state of the form. To manage the state we are using useState() hook and initialized the name and email.
• Event Handler:
  • The below example consists two handler methods:
    • handleChange(): The handleChange() method stores the updated values as a name and value pair when-ever there is a change occurred. It copies the data everytime into the Data object using setData method.
    • handleSubmit(): The handlesubmit() method console logs the collected form data into the console in the form of an Object. It also handles the default behaviour of reloading the entire page for every change in the form using the preventDefault() method.
• Form Structure:
  • The basic form structure which contains the ‘<input>’ tag which allows the user to enter an input long with type attribute, placeholder etc. The each input field calls the handleChange() method using onChange attribute.
  • The submit button triggers the handleSubmit() method and console logs the form data where ever the submit button is clicked.

Example-1: let’s look at handling a form with two text input fields i.e. name and email

Output:

Example-2: Let us look at how form handling looks with multiple input fields of different types.

Output: