Handling checkboxes and radio buttons in React - Step-by-Step Execution

Concept Flow - Handling checkboxes and radio buttons

Render form with inputs

↓

User clicks checkbox/radio

↓

Event handler runs

↓

Update state with new value

↓

Component re-renders

↓

Inputs reflect updated state

The form renders inputs, user clicks trigger event handlers that update state, causing re-render to reflect changes.

Execution Sample

React

function Form() {
  const [checked, setChecked] = React.useState(false);
  return <input type="checkbox" checked={checked} onChange={e => setChecked(e.target.checked)} />;
}

A checkbox input that toggles its checked state when clicked.

Execution Table

Step	User Action	State Before	Event Handler Action	State After	Rendered Output
1	Page loads	checked = false	None	checked = false	Checkbox unchecked
2	User clicks checkbox	checked = false	setChecked(true)	checked = true	Checkbox checked
3	User clicks checkbox again	checked = true	setChecked(false)	checked = false	Checkbox unchecked

💡 User stops clicking, state remains stable.

Variable Tracker

Variable	Start	After 1	After 2	Final
checked	false	true	false	false

Key Moments - 2 Insights

Why does the checkbox not update visually if we forget to update the state in the event handler?

Because the rendered checkbox's checked attribute depends on the state variable. If state isn't updated (see execution_table step 2), React re-renders with old state, so the checkbox stays the same.

How does React know which radio button is selected?

React uses the checked attribute bound to state. When a radio button is clicked, the event handler updates state to the selected value, causing re-render where only that radio's checked is true.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of 'checked' after the first user click?

A true

B false

C undefined

D null

💡 Hint

Check the 'State After' column at Step 2 in the execution_table.

At which step does the checkbox become unchecked again?

A Step 1

B Step 3

C Step 2

D Never

💡 Hint

Look at the 'Rendered Output' column and 'State After' at Step 3.

If the event handler did not call setChecked, what would happen to the checkbox state?

A It would toggle normally

B It would throw an error

C It would stay as it was initially

D It would become disabled

💡 Hint

Refer to the 'key_moments' explanation about state updates and rendering.

Concept Snapshot

Handling checkboxes and radio buttons in React:
- Use state to track checked value
- Bind input's checked attribute to state
- Update state in onChange handler
- React re-renders input to reflect state
- For radio buttons, track selected value and set checked accordingly

Full Transcript

This visual execution shows how React handles checkboxes and radio buttons. Initially, the checkbox is unchecked because the state variable 'checked' is false. When the user clicks the checkbox, the onChange event triggers the handler which updates the state to true. React then re-renders the component, and the checkbox appears checked. Clicking again toggles the state back to false, and the checkbox updates accordingly. This cycle depends on binding the input's checked attribute to the state and updating state on user interaction. Without updating state, the checkbox would not visually change. For radio buttons, a similar pattern applies, but the state tracks which option is selected. This ensures the UI always matches the state, keeping the form inputs controlled and predictable.