Multiple Inputs in React

When building forms in React, you often have multiple input fields (text, email, password, textarea, select, etc.). Managing them individually can get messy.

A single state object for all inputs makes your code cleaner, scalable, and easier to validate.

Using One State Object for Multiple Inputs

Instead of creating separate useState for every input:

const [name, setName] = useState("");
const [email, setEmail] = useState("");

You can use one state object:
This allows you to manage all form fields in one place.

const [form, setForm] = useState({
  name: "",
  email: "",
  message: "",
});

Handling Multiple Inputs Dynamically

You can use a single handleChange function for all fields using the name attribute:

Example – Multiple Controlled Inputs

import React, { useState } from "react";

function MultiInputForm() {
  const [form, setForm] = useState({
    name: "",
    email: "",
    message: "",
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setForm({
      ...form, // keep other fields unchanged
      [name]: value, // update the field that changed
    });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log("Form Submitted:", form);
    alert(`Name: ${form.name}, Email: ${form.email}, Message: ${form.message}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <inputtype="text"
          name="name"
          value={form.name}
          onChange={handleChange}
        />
      </label>
      <br />
      <label>
        Email:
        <inputtype="email"
          name="email"
          value={form.email}
          onChange={handleChange}
        />
      </label>
      <br />
      <label>
        Message:
        <textareaname="message"
          value={form.message}
          onChange={handleChange}
          rows={4}
          cols={40}
        />
      </label>
      <br />
      <button type="submit">Submit</button>
    </form>
  );
}

export default MultiInputForm;

The name attribute of each input matches the key in the state object.
[name]: value dynamically updates the correct field.
...form keeps other fields intact while updating one field.

Dynamic Select and Checkbox Fields

You can manage selects, checkboxes, and radio buttons in the same state object:

const [form, setForm] = useState({
  name: "",
  gender: "",
  hobbies: [],
});

const handleChange = (e) => {
  const { name, value, type, checked } = e.target;

  if (type === "checkbox") {
    const newHobbies = checked
      ? [...form.hobbies, value]
      : form.hobbies.filter((hobby) => hobby !== value);
    setForm({ ...form, hobbies: newHobbies });
  } else {
    setForm({ ...form, [name]: value });
  }
};

checkbox handling ensures multiple options are stored in an array.
select fields can also be managed dynamically.

Advantages of This Approach

Single source of truth: All form data in one state object.
Scalable: Easy to add/remove fields without creating new state variables.
Reusable: handleChange works for any input type with minimal tweaks.
Easy validation: Validate the entire form object before submission.

React Handbook

React Multiple Inputs

Multiple Inputs in React

Using One State Object for Multiple Inputs

Handling Multiple Inputs Dynamically

Dynamic Select and Checkbox Fields

Advantages of This Approach