Multiple Checkboxes in React — React Technical Interview Questions & Answers

Multiple Checkboxes in React

Multiple Checkboxes in React

  • Several checkboxes: store an array (or Set) of selected values. checked={on.includes(name)} onChange toggles membership. Don’t make useState(false) twenty times for a dynamic list. That’s the whole pattern.
  • Multiple Checkboxes in React — react starts checked. Tick Java → Java,React. State is an array of names.

Technical Interview Tip: Array of selected ids, not N booleans.

Code Examples for Multiple Checkboxes in React

Example

// Checkboxes
import { useState } from "react";

const ALL = ["Java", "Python", "React"];

export default function Skills() {
  const [on, setOn] = useState(["React"]);
  function toggle(name) {
    setOn((s) => (s.includes(name) ? s.filter((x) => x !== name) : [...s, name]));
  }
  return ALL.map((name) => (
    <label key={name}>
      <input type="checkbox" checked={on.includes(name)} onChange={() => toggle(name)} />
      {name}
    </label>
  ));
}

Multiple Checkboxes in React — react starts checked. Tick Java → Java,React. State is an array of names.

How to Explain Multiple Checkboxes in React to an Interviewer

Explain Multiple Checkboxes as if you are teaching a junior — definition, then one tiny UI.

State : array of ids/names. Checked : includes().

Write 5–10 lines that use Multiple Checkboxes and say what the UI does.

Show JSX Say the screen

What mistake do freshers make with Multiple Checkboxes?

Toggle : add or filter out.