Controlled Inputs

What this is. A controlled input is one where React state holds the value and the input displays it. One source of truth.

That is what makes it possible to validate as someone types, clear the field after submitting, or fill it in from elsewhere.

The pairing. value and onChange go together. value alone makes the field read-only and React will warn you. onChange alone means the input keeps its own value and your state never learns about it.

Start the state as an empty string rather than undefined, or the input begins uncontrolled and switches later, which produces a warning that confuses everyone the first time.

Submitting. Handle onSubmit on the form rather than onClick on the button. The form's submit event fires when someone presses Enter in a field, which a click handler never sees, and plenty of people submit forms that way.

Call e.preventDefault() first, or the browser reloads the page and everything in state is gone.