Form Handling in React

Step 1: Creating the Registration Form with Various Input Types

The first step in handling forms in React is to create the actual form with all necessary HTML elements. We’ll include a variety of input types to cover common use cases encountered in most applications.

Creating a New Component

Start by creating a new file called RegistrationForm.js. This component will contain our form with inputs for text, number, password, date, radio buttons, checkboxes, select dropdowns, a color picker, and a textarea.

Here’s the basic structure of our form:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
// src/components/RegistrationForm.js
import React from "react";

function RegistrationForm() {
  return (
    <form>
      <h2>Register</h2>
      <div>
        <label>Username:</label>
        <input type="text" name="username" />
      </div>
      <div>
        <label>Age:</label>
        <input type="number" name="age" />
      </div>
      <div>
        <label>Password:</label>
        <input type="password" name="password" />
      </div>
      <div>
        <label>Birth Date:</label>
        <input type="date" name="birthDate" />
      </div>
      <div>
        <label>Gender:</label>
        <input type="radio" name="gender" value="Male" /> Male
        <input type="radio" name="gender" value="Female" /> Female
      </div>
      <div>
        <label>Interests:</label>
        <input type="checkbox" name="interests" value="Sports" /> Sports
        <input type="checkbox" name="interests" value="Reading" /> Reading
      </div>
      <div>
        <label>Country:</label>
        <select name="country">
          <option value="">Select Country</option>
          <option value="USA">USA</option>
          <option value="Canada">Canada</option>
          <option value="UK">UK</option>
        </select>
      </div>
      <div>
        <label>Favorite Color:</label>
        <input type="color" name="favoriteColor" />
      </div>
      <div>
        <label>Bio:</label>
        <textarea name="bio"></textarea>
      </div>
      <button type="submit">Register</button>
    </form>
  );
}

export default RegistrationForm;

This form includes various input types that can handle different kinds of data inputs commonly used in user registrations.

Step 2: Adding Functionality to Capture Input Values

Once the basic form is set up, the next step is to manage the state of each input to capture user inputs effectively.

Managing State with React Hooks

We will use the useState hook to manage the form data as an object where each property corresponds to an input field in the form.

Here’s how to implement state management and update it on user input:

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
// src/components/RegistrationForm.js
import React, { useState } from "react";

function RegistrationForm() {
  const [formData, setFormData] = useState({
    username: "",
    age: "",
    password: "",
    birthDate: "",
    gender: "",
    interests: [],
    country: "",
    favoriteColor: "",
    bio: "",
  });

  const handleInputChange = (event) => {
    const { name, value, type, checked } = event.target;
    if (type === "checkbox") {
      setFormData((prevFormData) => ({
        ...prevFormData,
        interests: checked
          ? [...prevFormData.interests, value]
          : prevFormData.interests.filter((i) => i !== value),
      }));
    } else {
      setFormData((prevFormData) => ({
        ...prevFormData,
        [name]: value,
      }));
    }
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log(formData); // Log or process the formData as needed
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Username:</label>
        <input
          type="text"
          name="username"
          value={formData.username}
          onChange={handleInputChange}
        />
      </div>
      <div>
        <label>Age:</label>
        <input
          type="number"
          name="age"
          value={formData.age}
          onChange={handleInputChange}
        />
      </div>
      <div>
        <label>Password:</label>
        <input
          type="password"
          name="password"
          value={formData.password}
          onChange={handleInputChange}
        />
      </div>
      <div>
        <label>Birth Date:</label>
        <input
          type="date"
          name="birthDate"
          value={formData.birthDate}
          onChange={handleInputChange}
        />
      </div>
      <div>
        <label>Gender:</label>
        <input
          type="radio"
          name="gender"
          value="Male"
          checked={formData.gender === "Male"}
          onChange={handleInputChange}
        /> Male
        <input
          type="radio"
          name="gender"
          value="Female"
          checked={formData.gender === "Female"}
          onChange={handleInputChange}
        />{" "}
        Female
      </div>
      <div>
        <label>Interests:</label>
        <input
          type="checkbox"
          name="interests"
          value="Sports"
          checked={formData.interests.includes("Sports")}
          onChange={handleInputChange}
        /> Sports
        <input
          type="checkbox"
          name="interests"
          value="Reading"
          checked={formData.interests.includes("Reading")}
          onChange={handleInputChange}
        />{" "}
        Reading
      </div>
      <div>
        <label>Country:</label>
        <select
          name="country"
          value={formData.country}
          onChange={handleInputChange}
        >
          <option value="">Select Country</option>
          <option value="USA">USA</option>
          <option value="Canada">Canada</option>
          <option value="UK">UK</option>
        </select>
      </div>
      <div>
        <label>Favorite Color:</label>
        <input
          type="color"
          name="favoriteColor"
          value={formData.favoriteColor}
          onChange={handleInputChange}
        />
      </div>
      <div>
        <label>Bio:</label>
        <textarea
          name="bio"
          value={formData.bio}
          onChange={handleInputChange}
        ></textarea>
      </div>
      <button type="submit">Register</button>
    </form>
  );
}

export default RegistrationForm;

Make sure to add value={formData.<fieldName>} and onChange={handleInputChange} to each input to bind the form state to the input elements.

Step 3: Displaying Form Data as JSON on Submission

The final step in managing a form in React involves handling the form submission and displaying the captured data. This is an essential part of form processing, allowing you to provide feedback to the user or to prepare the data for backend submission. We’ll enhance our form to display the submitted data in JSON format within the UI, which is especially useful for debugging and for verifying input during development.

To complete our form functionality, we need to modify the handleSubmit function to handle the form submission event. This function will prevent the default form submission behavior, ensuring that the page does not reload, and then display the form data right in the form component.

Here is the updated implementation:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
import React, { useState } from "react";

function RegistrationForm() {
  const [formData, setFormData] = useState({
    username: "",
    age: "",
    password: "",
    birthDate: "",
    gender: "",
    interests: [],
    country: "",
    favoriteColor: "",
    bio: "",
  });

  const [submittedData, setSubmittedData] = useState(null); // State to hold the submitted data

  const handleInputChange = (event) => {
    const { name, value, type, checked } = event.target;
    if (type === "checkbox") {
      setFormData((prevFormData) => ({
        ...prevFormData,
        interests: checked
          ? [...prevFormData.interests, value]
          : prevFormData.interests.filter((interest) => interest !== value),
      }));
    } else {
      setFormData((prevFormData) => ({
        ...prevFormData,
        [name]: value,
      }));
    }
  };

  const handleSubmit = (event) => {
    event.preventDefault(); // Prevent default form submission
    setSubmittedData(formData); // Set the submitted data to display it
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* Form fields go here */}
      <button type="submit">Register</button>
      {submittedData && (
        <div>
          <h3>Submitted Data</h3>
          <pre>{JSON.stringify(submittedData, null, 2)}</pre>
        </div>
      )}
    </form>
  );
}

export default RegistrationForm;

Explanation of Key Components:

State Management: We use two pieces of state here, formData for capturing input changes and submittedData for storing the data once the form is submitted. This separation ensures that the display of submitted data is intentional and clear.

Form Submission: By setting the submittedData state upon form submission, we enable the display of this data within the component. This pattern is helpful for user-driven events where you need to confirm the action visually.

JSON Display: The use of the <pre> tag formatted with JSON.stringify provides a neatly formatted display of the JSON data. This makes it easy to read and verify the form data at a glance.

This comprehensive setup provides a robust way to handle forms in React, covering everything from initial data entry to the final data handling step. It ensures that the data is not only captured correctly but also displayed in a user-friendly manner, enhancing the overall user experience.