Controlled Inputs

Text inputs bring a question: the user types into the box, but your component has state: who owns the text? In React the answer is: state owns it. That's called a controlled input:

const [name, setName] = useState('');

<input
    value={name}
    onChange={(e) => setName(e.target.value)}
/>

Two wires make the loop:

• value={name}: the box always displays the state
• onChange: every keystroke calls the setter with e.target.value, the box's current text

So typing updates state, state re-renders, the box shows the new state. The payoff: the text lives in a variable you can validate, transform, clear or display anywhere else on the page.