React · Theory

Multiple Checkboxes in React

Theory

49/94

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.

Exam tip

Array of selected ids, not N booleans.

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.

Short notes

DefState : array of ids/names.
RuleChecked : includes().
RememberToggle : add or filter out.

// 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

Example

Short notes

Questions

Multiple Checkboxes in React

Example

Short notes

Questions