Handling Multiple Inputs

When working with multiple input fields, you can use a single state object and dynamically update fields using their name attribute.

function SignupForm() {
  const [form, setForm] = useState({ username: "", email: "" });

  const handleChange = (e) => {
    setForm({ ...form, [e.target.name]: e.target.value });
  };

  return (
    <form>
      <input name="username" value={form.username} onChange={handleChange} />
      <input name="email" value={form.email} onChange={handleChange} />
      <p>Username: {form.username}</p>
      <p>Email: {form.email}</p>
    </form>
  );
}

• Use name to identify which field to update.
• Spread operator ensures immutability when updating state.