Как реализовать группу чекбоксов с единым состоянием?

Question

Группа чекбоксов с единым состоянием реализуется через общий state.
Каждый чекбокс отражает часть этого состояния.
При изменении одного чекбокса обновляется общее состояние.
UI всегда рендерится на основе актуальных данных.

YeaHub · Accepted Answer

При работе с несколькими чекбоксами важно, чтобы их состояние было централизовано и предсказуемо.ОпределениеЕдиное состояние группы чекбоксов — это общий объект или массив, который описывает, какие элементы выбраны.Подход через массив значенийЧасто используют массив выбранных значений:const [selected, setSelected] = useState([]);
Обновление состояния:при выборе — добавляем значениепри снятии — удаляем значениеconst toggle = value => {
  setSelected(prev =>
    prev.includes(value)
      ? prev.filter(v => v !== value)
      : [...prev, value]
  );
};
Связь состояния и UIКаждый чекбокс:читает своё состояние из stateсообщает об изменениях через обработчик<input
  type="checkbox"
  checked={selected.includes('a')}
  onChange={() => toggle('a')}
/>
Почему это корректноТакой подход:исключает рассинхронизацию UI и данныхупрощает валидациюоблегчает отправку формыКраткий выводГруппа чекбоксов должна управляться единым состоянием. Это делает поведение формы предсказуемым и управляемым.