Real forms track many fields. You can use one state object or separate useState calls—pick based on clarity. Object state pairs well with a single change handler keyed by field name.
Object state pattern
const [form, setForm] = useState({ name: '', email: '' });
function updateField(field: keyof typeof form, value: string) {
setForm((prev) => ({ ...prev, [field]: value }));
}Submit handling
- Listen to
onSubmiton<form> - Call
event.preventDefault() - Validate, then call an API or update parent state
Self-check
- Why spread
...prevwhen updating one field in an object? - Where should validation run—on change, on blur, or on submit?