Handling checkboxes and radio buttons in React - Cheat Sheet & Quick Revision

Recall & Review

beginner

How do you track the state of a checkbox in React?

You use the useState hook to store a boolean value representing whether the checkbox is checked or not. The checkbox's checked attribute is set from this state, and the onChange handler updates the state when the user clicks.

intermediate

What is the difference between controlled and uncontrolled checkboxes in React?

Controlled checkboxes have their checked state managed by React state, so React controls their value. Uncontrolled checkboxes manage their own state internally, and you access their value using refs or form submission.

intermediate

How do you handle multiple checkboxes in React when users can select many options?

You store the selected options in an array state. When a checkbox is checked, you add its value to the array. When unchecked, you remove it. The checked attribute checks if the value is in the array.

beginner

How do radio buttons differ from checkboxes in React handling?

Radio buttons allow only one selection in a group. You store a single value in state representing the selected option. Each radio button's checked attribute compares its value to the state value.

beginner

Why is it important to use the name attribute on radio buttons?

The name attribute groups radio buttons so the browser knows they belong together. This ensures only one radio button in the group can be selected at a time and improves accessibility.

Which React hook is commonly used to manage checkbox state?

A useContext

B useEffect

C useState

D useRef

useState is used to store and update the checkbox's checked state.

How do you represent multiple selected checkboxes in React state?

A An array of selected values

B A string

C An object with keys true/false

D A boolean value

An array holds all selected checkbox values for multiple selections.

What attribute must radio buttons share to be grouped correctly?

A checked

B value

C id

D name

The name attribute groups radio buttons so only one can be selected.

In React, how do you update the state when a checkbox is clicked?

A Use onChange handler to update state

B Directly change the DOM element

C Use useEffect to listen for clicks

D Use setTimeout to delay update

The onChange handler updates the React state when the checkbox changes.

What happens if you don't control a checkbox in React?

A React manages its state automatically

B The checkbox manages its own state (uncontrolled)

C The checkbox cannot be clicked

D The checkbox will always be checked

Without controlling it, the checkbox manages its own state internally.

Explain how to handle a single checkbox in React using state.

Think about how you track if the box is checked or not.

Describe how to manage a group of radio buttons in React so only one can be selected.

Remember radio buttons work like a team where only one can win.