Forms

A controlled input is an input whose value is driven by React state. You set the value attribute to a state variable and update that state on every keystroke with onChange. React is always in sync with what the user typed.

This contrasts with uncontrolled inputs — where the DOM manages the value and you read it only when needed (usually with a ref). Controlled inputs are React's preferred pattern because they give you instant access to the value for validation, transformation, or other logic.

Form submission uses the onSubmit event on the <form> element, not onClick on the button. Always call e.preventDefault() as the first line of your handler — without it, the browser reloads the page on submit.

For multi-field forms, you can use one state variable per field, or combine them into a single object: useState({ name: '', email: '' }). Update with spread: setForm({ ...form, name: e.target.value }).