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.