Controlled Forms

A controlled input stores its text in state. React drives the value, and the input reports changes back through onChange.

Set the input value to a state variable, then update that state inside the change handler so the two stay in sync.

• value binds the input to state
• onChange reads event.target.value and updates state
• The state is now the single source of truth

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