Lesson 10 — Multi-field form

One state object for a whole form

Instead of one useState per field, keep the form in one object and give each input a name attribute that matches its key. One handler copies the object with spread and overwrites just that key. [key]: value in an object literal is a computed property name — it uses the variable's value as the key.

const key = "city";
const next = { ...form, [key]: "Oslo" }; // same as { ...form, city: "Oslo" }

Why it matters: sign-up and checkout forms have many fields; this keeps them to one handler.