Lesson 5 — Handling input

Inputs controlled by state

A controlled input gets its value from state (value={text}) and reports every keystroke through onChange. The handler receives an event object; e.target is the input element, so e.target.value is what the user typed. Without onChange, React keeps forcing the old value and typing does nothing.

const [q, setQ] = useState("");
<input value={q} onChange={(e) => setQ(e.target.value)} />

Why it matters: search boxes, logins and every form are built from controlled inputs.