Handling checkboxes and radio buttons in React - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a checkbox input that updates state when clicked.

React

const [checked, setChecked] = useState(false);

return (
  <input type="checkbox" checked={checked} onChange=[1] />
);

Drag options to blanks, or click blank then click option'

A() => setChecked(!checked)

B() => setChecked(true)

C() => setChecked(false)

D() => setChecked(checked)

Attempts:

3 left

💡 Hint

Common Mistakes

Setting the state always to true or false instead of toggling.

Not using a function to update the state.

The onChange handler toggles the checked state by setting it to the opposite of its current value.

2fill in blank

medium

Complete the code to handle a radio button group that updates the selected option in state.

React

const [selected, setSelected] = useState('option1');

return (
  <input type="radio" value="option1" checked={selected === 'option1'} onChange=[1] />
);

Drag options to blanks, or click blank then click option'

A(e) => setSelected(true)

B() => setSelected('option1')

C(e) => setSelected(e.target.value)

D() => setSelected(false)

Attempts:

3 left

💡 Hint

Common Mistakes

Setting state to a boolean instead of the value string.

Not using the event parameter to get the value.

The onChange handler updates the selected state to the value of the clicked radio button.

3fill in blank

hard

Fix the error in the checkbox handler to correctly update state based on the checkbox's checked property.

React

const [checked, setChecked] = useState(false);

function handleChange(e) {
  setChecked([1]);
}

return <input type="checkbox" checked={checked} onChange={handleChange} />;

Drag options to blanks, or click blank then click option'

Ae.target.value

Be.checked

Ce.checkedValue

De.target.checked

Attempts:

3 left

💡 Hint

Common Mistakes

Using e.target.value which is a string, not boolean.

Using non-existent properties like e.checked.

The checkbox's checked state is found in e.target.checked, not e.target.value or other properties.

4fill in blank

hard

Fill both blanks to create a controlled radio button group that updates state on change.

React

const [choice, setChoice] = useState('A');

return (
  <input type="radio" value="A" checked={choice [1] 'A'} onChange=[2] />
);

Drag options to blanks, or click blank then click option'

A===

B!==

C(e) => setChoice(e.target.value)

D() => setChoice('A')

Attempts:

3 left

💡 Hint

Common Mistakes

Using !== instead of === for checked comparison.

Using a static function that does not use event to update state.

The checked attribute compares choice with 'A' using strict equality. The onChange updates choice to the clicked value.

5fill in blank

hard

Fill the two blanks to create a checkbox group that updates an array of selected options in state.

React

const [selected, setSelected] = useState([]);

function handleCheckboxChange(e) {
  const value = e.target.value;
  if (selected.includes(value)) {
    setSelected(selected.filter(item => item [1] value));
  } else {
    setSelected([...selected, [2]]);
  }
}

return (
  <input type="checkbox" value="opt1" checked={selected.includes('opt1')} onChange={handleCheckboxChange} />
);

Drag options to blanks, or click blank then click option'

A!==

Bvalue

C===

Dselected

Attempts:

3 left

💡 Hint

Common Mistakes

Using === instead of !== in filter, which would keep the item instead of removing it.

Adding the whole selected array instead of the new value.

To remove an item, filter with (item => item !== value), keeping items !== value (removes matching). To add, spread selected and add value.