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.

Practice

1. Which statement best describes the difference between checkboxes and radio buttons in React?

easy

A. Both checkboxes and radio buttons allow only one selection.

B. Checkboxes allow only one selection; radio buttons allow multiple selections.

C. Both checkboxes and radio buttons allow multiple selections.

D. Checkboxes allow multiple selections; radio buttons allow only one selection.

Solution

1. Step 1: Understand checkbox behavior

   Checkboxes let users select any number of options, including none, one, or many.

2. Step 2: Understand radio button behavior

   Radio buttons restrict selection to exactly one option within a group.

3. Final Answer:

   Checkboxes allow multiple selections; radio buttons allow only one selection. -> Option D

4. Quick Check:

   Checkboxes = multiple, Radio buttons = single [OK]

Hint: Checkboxes = many choices, radios = one choice [OK]

Common Mistakes:

• Confusing which input allows multiple selections
• Thinking radio buttons allow multiple selections
• Assuming checkboxes allow only one selection

2. Which of the following is the correct way to handle a checkbox change event in React functional components?

easy

A. <input type='checkbox' checked={checked} onClick={e => setChecked(e.target.checked)} />

B. <input type='checkbox' checked={checked} onChange={e => setChecked(e.target.checked)} />

C. <input type='checkbox' value={checked} onChange={e => setChecked(e.target.checked)} />

D. <input type='checkbox' checked={checked} onChange={e => setChecked(e.target.value)} />

Solution

1. Step 1: Use checked attribute for checkbox state

   Checkbox uses checked prop to reflect its state, not value.

2. Step 2: Use onChange event and e.target.checked

   The onChange event provides e.target.checked boolean to update state.

3. Final Answer:

   <input type='checkbox' checked={checked} onChange={e => setChecked(e.target.checked)} /> -> Option B

4. Quick Check:

   Checkbox state = checked + onChange with e.target.checked [OK]

Hint: Use checked and onChange with e.target.checked [OK]

Common Mistakes:

• Using e.target.value instead of e.target.checked
• Using onClick instead of onChange for checkbox
• Binding value instead of checked attribute

3. What will be the output when the following React component is rendered and the user selects the "Option 2" radio button?

function RadioGroup() {
  const [selected, setSelected] = React.useState('');
  return (
    <div>
      <input type='radio' name='group' value='1' checked={selected === '1'} onChange={e => setSelected(e.target.value)} /> Option 1
      <input type='radio' name='group' value='2' checked={selected === '2'} onChange={e => setSelected(e.target.value)} /> Option 2
      <p>Selected: {selected}</p>
    </div>
  );
}

medium

A. Selected: 2

B. Selected: '' (empty string)

C. Selected: 1

D. No output, component crashes

Solution

1. Step 1: Initial state is empty string

   The state selected starts as empty string, so no radio is checked initially.

2. Step 2: User selects "Option 2" radio

   On selecting "Option 2", onChange sets selected to '2'.

3. Step 3: Component re-renders showing selected value

   The paragraph shows Selected: 2 because state updated to '2'.

4. Final Answer:

   Selected: 2 -> Option A

5. Quick Check:

   Radio selected value updates state and display [OK]

Hint: Radio updates state with value, display shows selected [OK]

Common Mistakes:

• Assuming state remains empty after selection
• Confusing checked with value attribute
• Expecting multiple radios to be selected

4. Identify the error in this React checkbox handler code:

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

medium

A. Using e.target.value instead of e.target.checked in onChange

B. Missing initial state for checked

C. Using onClick instead of onChange event

D. Not binding the checked attribute

Solution

1. Step 1: Check event handler usage

   The onChange handler uses e.target.value, which is a string, not boolean.

2. Step 2: Correct property for checkbox state

   Checkbox state must use e.target.checked which is boolean true/false.

3. Final Answer:

   Using e.target.value instead of e.target.checked in onChange -> Option A

4. Quick Check:

   Checkbox onChange must use e.target.checked [OK]

Hint: Checkbox onChange uses e.target.checked, not value [OK]

Common Mistakes:

• Using e.target.value for checkbox state
• Confusing onClick with onChange
• Not initializing state properly

5. You want to create a React component that lets users select multiple toppings using checkboxes and shows the selected toppings below. Which approach correctly manages multiple checkbox states?

hard

A. Use separate state variables for each checkbox and ignore updating the UI on change.

B. Use a single boolean state for all checkboxes and toggle it on any change.

C. Use an array state to store selected toppings and update it by adding/removing toppings on checkbox changes.

D. Use a string state to store all toppings concatenated and update it by appending toppings on change.

Solution

1. Step 1: Understand multiple checkbox state needs

   Multiple checkboxes require tracking which items are selected, best done with an array.

2. Step 2: Update array state on checkbox toggle

   On change, add topping if checked, remove if unchecked, keeping UI in sync.

3. Final Answer:

   Use an array state to store selected toppings and update it by adding/removing toppings on checkbox changes. -> Option C

4. Quick Check:

   Multiple checkboxes = array state with add/remove [OK]

Hint: Use array state to track multiple checkbox selections [OK]

Common Mistakes:

• Using single boolean for multiple checkboxes
• Not updating UI after state change
• Concatenating strings instead of using arrays