Multiple fields

Learn to manage several form fields with one state.

Multiple fields

The cleanest way to manage two or three fields is one object state: const [form, setForm] = useState({name: "", email: ""}).

You write a single handleChange and update using the field name. This cuts code repetition.

Later React Hook Form automates this; for now we learn the base.

Single handler approach

You give each input a name attribute and update by field name in one handler: setForm(f => ({...f, [e.target.name]: e.target.value})).

Here [e.target.name] is a computed property; it names the field dynamically. We will see this form later.

This approach means even a ten-field form needs only one handler.

Exercise Two-field form

Complete the skeleton. Write a SignupForm component; import useState. Define const [form, setForm] = useState({name: "", email: ""});. Return a <form> with two inputs: one value={form.name}, the other value={form.email}. Export it.

Show example solution

import { useState } from "react";

function SignupForm() {
  const [form, setForm] = useState({ name: "", email: "" });
  return <form><input value={form.name} /><input value={form.email} /></form>;
}

export default SignupForm;

Test yourself

What is the cleanest way to hold two fields?
```
Object state updates with spread.
```
- A single object useState
- Two separate props
- Two separate useState
- A global variable
Show answer

A single object useState — Related fields group into one object.

Multiple fields: fill in the missing part

setForm(f => ({ ...f, email: ____ }))

Show answer

setForm(f => ({ ...f, email: e.target.value }))

Multiple fields: match the terms

name attribute

Field name
[e.target.name]

Computed property
...f

Old fields
setForm

Object updater

Next lesson: Summary - Forms

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies