How do you manage several form fields with a single state object?
Store the fields in one object and give each input a name attribute. One onChange handler reads e.target.name and e.target.value and updates that key with computed property syntax, copying the rest with spread.
Explain it simply
A registration form with ten fields would need ten useState calls and ten handlers if written naively. Instead, keep one object, like one admission form with many boxes, and have a single handler decide which box to fill.
Each input carries a name that matches a key in the state. The handler uses [name]: value, a computed property, to update just that key. The spread ...form copies the other fields so nothing is lost.
For checkboxes the value is in e.target.checked, not e.target.value, so handle that case separately.
Example
function Register() {
const [form, setForm] = useState({ name: "", email: "", agree: false });
function handleChange(e) {
const { name, value, type, checked } = e.target;
setForm(f => ({ ...f, [name]: type === "checkbox" ? checked : value }));
}
return (
<form>
<input name="name" value={form.name} onChange={handleChange} />
<input name="email" value={form.email} onChange={handleChange} />
<input name="agree" type="checkbox" checked={form.agree} onChange={handleChange} />
</form>
);
}What to say in the interview
"I keep the fields in one state object and give inputs name attributes. A shared handler updates state with a computed key and spread so other fields are kept, using checked for checkboxes. For larger forms I would consider a library such as React Hook Form."
Common mistakes
- Forgetting to spread the previous state, which wipes the other fields.