Forms and controlled inputs

An input is controlled when React state decides its value: you pass value (or checked) and update the state in onChange.

function NameField() {
  const [name, setName] = useState("");
  return <input value={name} onChange={(e) => setName(e.target.value)} />;
}

Each keystroke fires onChange, the handler sets state, React re-renders and writes the state back into the input. Because the value always passes through your code, you can transform it or refuse it — and refusing really works: if the handler does not set state, the input snaps back to the current state value.

1// A controlled "code" field: upper-case, at most 4 characters.2function makeField() {3  let state = "";                               // useState("")4  const onChange = (typed) => {5    if (typed.length > 4) return;               // refuse: do not set state6    state = typed.toUpperCase();7  };8  return { type: (typed) => { onChange(typed); return state; } };9}10 11export function run() {12  const field = makeField();13  // What the browser proposes after each keystroke, and what is shown after the render:14  return ["a", "ab", "ab1", "ab1x", "AB1Xz"].map((typed) => `${typed} -> ${field.type(typed)}`);15}

Two warnings React prints are worth recognising. value without onChange makes a read-only field (React warns that you probably meant defaultValue). And value={undefined} followed later by a string switches the input from uncontrolled to controlled — initialise text state with "", not undefined.

One handler, many fields

For a form with several fields, keep them in one object and use each input's name:

function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
  const { name, type, value, checked } = e.target;
  setValues((v) => ({ ...v, [name]: type === "checkbox" ? checked : value }));
}

A checkbox is controlled with checked, not value, and its state lives in e.target.checked — for a checkbox without a value attribute, e.target.value is the string "on" whether it is ticked or not. A number input still gives you a string in e.target.value, and an empty field gives "". Keep the string in state (so the user can type freely) and convert it when you validate:

1export function run() {2  // e.target.value is always a string, even for <input type="number">.3  const values = ["42", "", "17.5"];4  return values.map((v) => ({5    value: v,6    typeofValue: typeof v,7    "Number(value)": Number(v),8    isEmpty: v.trim() === "",9  }));10}

Validation is derived

Errors are a function of the current values, so compute them during render: const errors = validate(values). Storing errors in state and syncing them with an effect is the redundant-state pattern from lesson 8. Store only what you cannot compute, such as which fields the user has touched.

Uncontrolled inputs and form actions

Not every field needs state. An uncontrolled input (defaultValue, with the DOM holding the value) is fine when you only need the value on submit. React 19 makes that path first-class: <form action={fn}> calls fn with the form's FormData when it is submitted, works with async functions, and resets uncontrolled fields after the action succeeds. useActionState keeps the action's result (for example, server-side errors) and a pending flag, and useFormStatus (from react-dom) lets a component rendered inside the form, such as its submit button, read whether a submission is in progress.

Common mistakes

• Reading e.target.value for a checkbox. Without a value attribute it is "on" either way; use checked.
• Treating an empty number input as 0. Number("") is 0, so an empty optional field turns into a real value, as the example shows.