Handling checkboxes and radio buttons in React - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output when selecting multiple checkboxes?

Consider this React component that manages multiple checkboxes. What will be the value of selectedFruits after checking 'Apple' and 'Banana'?

React

import React, { useState } from 'react';

function FruitSelector() {
  const [selectedFruits, setSelectedFruits] = useState([]);

  function handleChange(event) {
    const { value, checked } = event.target;
    if (checked) {
      setSelectedFruits(prev => [...prev, value]);
    } else {
      setSelectedFruits(prev => prev.filter(fruit => fruit !== value));
    }
  }

  return (
    <form>
      <label><input type="checkbox" value="Apple" onChange={handleChange} /> Apple</label>
      <label><input type="checkbox" value="Banana" onChange={handleChange} /> Banana</label>
      <label><input type="checkbox" value="Cherry" onChange={handleChange} /> Cherry</label>
    </form>
  );
}

A ["Banana"]

B ["Apple"]

C ["Apple", "Banana"]

D []

💡 Hint

Think about how the state array changes when checkboxes are checked or unchecked.

When you check 'Apple' and 'Banana', the handleChange function adds their values to the selectedFruits array. So the array contains both.

❓ state_output

intermediate

What is the selected radio button value after user clicks?

Given this React component with radio buttons, what will be the value of selectedColor after the user clicks the 'Blue' option?

React

import React, { useState } from 'react';

function ColorPicker() {
  const [selectedColor, setSelectedColor] = useState('Red');

  function handleChange(event) {
    setSelectedColor(event.target.value);
  }

  return (
    <form>
      <label><input type="radio" value="Red" checked={selectedColor === 'Red'} onChange={handleChange} /> Red</label>
      <label><input type="radio" value="Blue" checked={selectedColor === 'Blue'} onChange={handleChange} /> Blue</label>
      <label><input type="radio" value="Green" checked={selectedColor === 'Green'} onChange={handleChange} /> Green</label>
    </form>
  );
}

A "Red"

B "Blue"

C "Green"

D null

💡 Hint

Radio buttons allow only one selection, so the state updates to the clicked value.

When the user clicks 'Blue', the handleChange updates selectedColor to 'Blue'.

📝 Syntax

advanced

Which option correctly handles multiple checkbox state updates?

You want to update the state array when checkboxes are toggled. Which code snippet correctly updates the state without causing stale state bugs?

React

const [selectedItems, setSelectedItems] = useState([]);

function handleCheckboxChange(event) {
  const { value, checked } = event.target;
  // Update state here
}

A

if (checked) {
  setSelectedItems(prev => [...prev, value]);
} else {
  setSelectedItems(prev => prev.filter(item => item !== value));
}

B

if (checked) {
  setSelectedItems([...selectedItems, value]);
} else {
  setSelectedItems(selectedItems.filter(item => item !== value));
}

C

if (checked) {
  selectedItems.push(value);
  setSelectedItems(selectedItems);
} else {
  const index = selectedItems.indexOf(value);
  if (index > -1) selectedItems.splice(index, 1);
  setSelectedItems(selectedItems);
}

D

if (checked) {
  setSelectedItems(selectedItems.concat(value));
} else {
  setSelectedItems(selectedItems.filter(item => item !== value));
}

💡 Hint

Using the updater function form of setState avoids stale closures.

Option A uses the functional updater prev => [...prev, value] which ensures the latest state is used, preventing bugs when state updates happen quickly.

🔧 Debug

advanced

Why does this radio button group not update on click?

This React component renders radio buttons but the selection never changes when clicked. What is the cause?

React

import React, { useState } from 'react';

function SizeSelector() {
  const [size, setSize] = useState('Medium');

  function handleChange(event) {
    setSize(event.target.value);
  }

  return (
    <form>
      <label><input type="radio" value="Small" checked={size === 'Small'} onChange={handleChange} /> Small</label>
      <label><input type="radio" value="Medium" checked={size === 'Medium'} onChange={handleChange} /> Medium</label>
      <label><input type="radio" value="Large" checked={size === 'Large'} onChange={handleChange} /> Large</label>
    </form>
  );
}

A The state variable 'size' is assigned directly instead of using setSize, so React does not re-render.

B The 'checked' attribute should be 'defaultChecked' for controlled inputs.

C The event handler is missing 'event.preventDefault()' causing default form submission.

D The radio buttons need unique 'name' attributes to group correctly.

💡 Hint

State variables in React must be updated with their setter functions to trigger re-render.

Directly assigning size = event.target.value does not update React state. You must call setSize(event.target.value) to update state and re-render.

🧠 Conceptual

expert

Why use controlled components for checkboxes and radio buttons in React?

Which statement best explains the advantage of using controlled components for checkboxes and radio buttons in React?

A Controlled components eliminate the need for event handlers on inputs.

B Controlled components automatically optimize rendering performance without extra code.

C Controlled components allow the browser to manage state internally, reducing React's workload.

D Controlled components keep the React state as the single source of truth, enabling predictable UI and easier debugging.

💡 Hint

Think about how React manages UI and state synchronization.

Controlled components keep the input state inside React, making UI predictable and easier to debug. The other options are incorrect because controlled inputs require event handlers and do not automatically optimize performance or delegate state to the browser.

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