Как организовать чекбоксы в react?

Question

[undfnd]

Данные (data) от апи вида (идут в компонент через пропсы):

{
  item1: {
    value1: bool,
    value2: bool
  },
  item2: {
    value1: bool,
    value2: bool
  }
}

Вывод (грубо говоря):

data.map(item => (
   <div>
      <Checkbox //для value1
         checked={item.value1}
         onChange={отправить запрос на сервер для изменения этого value и подождать ответа}
       />
      <Checkbox //для value2
         checked={item.value2}
         onChange={отправить запрос на сервер для изменения этого value и подождать ответа}
       />
      <Checkbox //для "выделить все" для каждого отдельного item
         checked={item.value1 && item.value2}
         onChange={отправить запрос на сервер для изменения всех value и подождать ответа}
       />
  </div>
 ))

Пока идет ответ - добавлять состояние типа "loading" каждому чекбоксу для отдельного item или всем, если изменен "выделить все".
Как лучше организовать работу с чекбоксами в этом случае? Где хранить временное "loading" значение для каждого? Например, дополнительные поля в исходные data добавлять? Или отдельный объект в стейте типа "checkboxes"?

Answer 1

[0xD34F]

Я бы попробовал добавить массив имён обрабатываемых элементов.