Build Controlled Forms in React

A controlled control has one source of truth: React state.

1. State supplies what the control displays.
2. A user edit triggers a change handler.
3. The handler updates state.
4. React renders again with the new current value.

This loop means the displayed control and its state stay synchronized. In the Workshop planner, a typed attendee name will eventually be represented by string state, while a checked checkbox will be represented by boolean state.

Choose a mode for a control and keep that mode for its whole lifetime.

• value and checked describe the current values of controlled controls.
• defaultValue and defaultChecked provide an initial value for uncontrolled controls; after that, the browser manages the live value.

Do not switch a control between these modes after it first renders. In particular, do not pass null or undefined as a controlled value. A controlled text value is always a string, including ""; a controlled checked value is always a boolean.

Workshop planner state in src/App.tsx

Match each JSX prop to its role.

A controlled text field has one source of truth: React state. The input displays attendeeName; when the learner types, the change callback stores that exact string; React then renders the updated value back into the input.

For the Workshop planner, keep attendeeName as a string. The empty string is a valid starting value, and every edit—including spaces—can be stored unchanged.

In src/App.tsx, create the first controlled control. The inline callback receives its event type from the onChange prop, so TypeScript knows that event.currentTarget is this input element. Read its string with .value and pass it directly to the setter.

The native label connection remains intact: htmlFor and id use the same value. React controls the text value; the browser still provides the label and the required constraint.

src/App.tsx — Workshop planner

A select has one string value

In Workshop planner, session starts as "". That empty string matches the first option, so the select begins with Choose a session displayed.

Bind the select with value={session}. Each option's value is the value React stores—not necessarily the text a person sees. When the learner selects an option, read event.currentTarget.value; it is a string.

Add the session state and this labeled controlled select in src/App.tsx. The empty-value option represents no session selection yet.

A checkbox is different

A checkbox has a string value attribute too, but that does not describe whether it is selected. Its displayed on/off state comes from checked, and event.currentTarget.checked is a boolean.

Keep this state separate from session: changing materials must not change the session, and changing the session must not change materials.

Add a separate boolean state and the optional materials control. The inline handler receives the appropriate input event type from JSX.

Inline JSX handlers receive their event type from the prop they are attached to. Once you move that callback into a standalone function, it no longer has that contextual type. Add an explicit ChangeEvent<...> annotation so TypeScript knows what event.currentTarget is.

The generic identifies the actual control element. That lets you read its appropriate property without a cast or any.

Import React event types with a type-only import, then annotate each extracted handler for the element that triggers it.

A numeric control still has a string draft

type="number" changes the browser’s input UI and native constraints, but event.currentTarget.value is still a string. Keep the editable seat count in seatsDraft.

That gives the draft an important state: it can be empty while the learner is editing. An empty draft is not the same thing as the numeric value zero.

Place this state line near the other state declarations in the existing Workshop planner App component. Bind the Seats control to that state and store the unmodified value from currentTarget.

A controlled number input may temporarily be blank. If every edit were converted with Number, a cleared field would become 0, which changes what the learner typed. Keep only the draft while editing; do not add a second synchronized numeric state.

At the later accepted local-submission boundary, derive the number once with const seats = Number(seatsDraft);.

Inside src/App.tsx, in the existing Workshop planner component

Attach submission behavior to the form’s onSubmit, not to a submit button click. That gives a click on Preview locally and keyboard submission the same route.

With normal browser submission, native constraints run first. An empty required control or an invalid Seats value is rejected by the browser, so the submit handler is not reached. When the form is valid, React receives the submit event. The handler can then keep the page in place and create a local preview.

First, update the imports at the top level of src/App.tsx. ES module imports stay outside App.

Then, inside the existing App component, add feedback alongside the other state declarations and place handleSubmit before return. The handler converts the accepted string draft to seats, then stores one truthful in-memory local preview. It does not send or save anything.

At the top of src/App.tsx, keep the runtime import and update the type-only import.

Inside App, alongside the existing state and handlers, add the feedback state and valid-submission handler.

In the returned JSX, connect the existing form to the handler. Keep the status region mounted inside the form so React can render the feedback string.

A successful local preview creates a feedback snapshot. It reflects the values at submission time.

If the learner then edits a controlled control, those draft values change—but the previous feedback does not. No new submission occurred, so feedback keeps its earlier text.

Reset form is a separate user action. It restores every React-owned field to its initial value and clears the feedback string.

Controlled controls receive their displayed values from React state. Therefore, reset those state values in the reset button's event handler.

A native DOM reset alone does not reset React state. On a later render, React can apply the state-owned values again. Use an explicit button with type="button" so this action does not submit the form.

Add this inside App, alongside the existing submit handler. Place the button inside the form.

Keep the existing status region mounted:

<p role="status">{feedback}</p>

setFeedback("") makes the region empty after reset. It does not remove the region or mutate the DOM directly.

Replace src/App.tsx in your existing React + TypeScript project with the following three contiguous sections, in order. Keep the imports at the top of the file, add no dependencies, and do not add noValidate.

The diagram is the integration contract you will verify: state supplies every displayed controlled value; native validation gates submission; a valid submission produces an in-memory local preview; reset restores the initial draft.

Copy this as the first section of src/App.tsx.

Place this section immediately after section 1. The form owns submission through onSubmit, so clicking Preview locally and submitting with the keyboard use the same behavior. The browser checks required fields and the Seats constraints before this handler runs.

On a valid submission, preventDefault() prevents navigation, Number converts the accepted draft, and feedback stores one local preview snapshot. The reset handler restores every state value rather than changing the DOM directly.

Paste this directly below section 1.

Paste the final section directly below section 2, then save the file and use your project's usual local development command. The expected rendered states are attached to this completed, runnable component: compare your initial form and your valid local preview with them.

Paste this directly below section 2 to complete src/App.tsx.

The complete component keeps the controlled-form contract intact. Strings control the text field, select, and editable numeric draft; a boolean controls the checkbox. Change handlers read currentTarget and update the matching state. Native constraints gate onSubmit; only valid submissions create a local preview. Reset restores state and clears the still-mounted status region.