Как в react выделить все чекбоксы?

Question

[1233211]

Есть страница с чекбоксами, у которых name={'names'} и onChange={handleClickCheckbox}.

Вот так собираю данные с чекбоксов

const [names, setNames] = useState([]);

const handleClickCheckbox = (e) => {
    const formData = new FormData(e.currentTarget.form);
    const names = formData.getAll('names');
    setNames(names);
}

Нужно создать ещё один чекбокс, при клике на который, нужно выделять все чекбоксы, у которых name='names'.

Answer 1

[Владимир Коротенко]

Либо привязка, либо выбираете из дома по фильтру и черкаете их

Answer 2

[0xD34F]

const Checkbox = forwardRef(({ label, ...props }, ref) =>
  <label>
    <input type="checkbox" ref={ref} {...props} />
    {label}
  </label>
);

function CheckboxGroup({
  items,
  label = item => item,
  selected,
  setSelected,
}) {
  const onChange = ({ target: { checked, dataset: { index } } }) =>
    setSelected(selected => checked
      ? [ ...selected, items[index] ]
      : selected.filter(n => n !== items[index])
    );

  const allSelectedRef = useRef();
  const onAllSelectedChange = ({ target: { checked } }) =>
    setSelected(checked ? [...items] : []);

  useEffect(() => {
    const isAllSelected = items.length === selected.length;
    allSelectedRef.current.checked = isAllSelected;
    allSelectedRef.current.indeterminate = !isAllSelected && !!selected.length;
  }, [ selected ]);

  return (
    <div className="checkbox-group">
      <Checkbox
        label="SELECT ALL"
        defaultChecked={false}
        onChange={onAllSelectedChange}
        ref={allSelectedRef}
      />
      {items.map((n, i) => (
        <Checkbox
          label={label(n)}
          data-index={i}
          checked={selected.includes(n)}
          onChange={onChange}
        />
      ))}
    </div>
  );
}

https://jsfiddle.net/kj9wet6L/