Chakra-UI React Select All/Some Checkboxes

Question

I am trying to add more checkboxes to the example in Chakra-UI's "Indeterminate" checkbox example in their docs: https://chakra-ui.com/docs/form/checkbox

I can't seem to add more than two checkboxes and still keep the functionality to toggle all checkboxes and/or select individual checkboxes. Ideally, I would like to be able to add x number of checkboxes with a .map() method and be able to select each checkbox individually as well as all checkboxes. Any help is greatly appreciated.

Not working:

function IndeterminateExample() {
  const [checkedItems, setCheckedItems] = React.useState([false, false, false])

  const allChecked = checkedItems.every(Boolean)
  const isIndeterminate = checkedItems.some(Boolean) && !allChecked

  return (
    <>
      <Checkbox
        isChecked={allChecked}
        isIndeterminate={isIndeterminate}
        onChange={(e) => setCheckedItems([e.target.checked, e.target.checked])}
      >
        Parent Checkbox
      </Checkbox>
      <Stack pl={6} mt={1} spacing={1}>
        <Checkbox
          isChecked={checkedItems[0]}
          onChange={(e) => setCheckedItems([e.target.checked, checkedItems[1]])}
        >
          Child Checkbox 1
        </Checkbox>
        <Checkbox
          isChecked={checkedItems[1]}
          onChange={(e) => setCheckedItems([checkedItems[0], e.target.checked])}
        >
          Child Checkbox 2
        </Checkbox>
          <Checkbox
          isChecked={checkedItems[1]}
          onChange={(e) => setCheckedItems([checkedItems[1], e.target.checked])}
        >
          Child Checkbox 3
        </Checkbox>
      </Stack>
    </>
  )
}

Answer 1

Create a state to track all selected ids.

 const [checkedVendorIds, setCheckedVendorIds] = React.useState([]);

Here is a complete code using a table:

 <Table variant="simple">
                  <Thead>
                    <Tr>
                      <Th width="10px">
                        <Checkbox
                          isChecked={
                            checkedVendorIds.length ===
                            vendors.map(vendor => vendor.id).length
                          }
                          onChange={() => {
                            const vendorIds = vendors.map(vendor => vendor.id);
                            if (checkedVendorIds.length === vendorIds.length) {
                              setCheckedVendorIds([]);
                            } else {
                              setCheckedVendorIds(vendorIds);
                            }
                          }}
                        ></Checkbox>
                      </Th>
                      <Th>Vendors</Th>
                    </Tr>
                  </Thead>
                  <Tbody>
                    {vendors.map((vendor, index) => (
                      <Tr
                        key={vendor.id}
                        _hover={{ bg: bg }}
                        _groupHover={{ bg: bg }}
                        cursor="pointer"
                      >
                        <Td width="10px">
                          <Checkbox
                            isChecked={checkedVendorIds.includes(vendor.id)}
                            onChange={event => {
                              event.stopPropagation();
                              const index = checkedVendorIds.indexOf(vendor.id);

                              if (index > -1) {
                                setCheckedVendorIds([
                                  ...checkedVendorIds.slice(0, index),
                                  ...checkedVendorIds.slice(index + 1)
                                ]);
                              } else {
                                setCheckedVendorIds([
                                  ...checkedVendorIds,
                                  vendor.id
                                ]);
                              }
                            }}
                          ></Checkbox>
                        </Td>
                        <Td>
                          <Editable
                            defaultValue={vendor.name}
                            onChange={value => {
                              console.log(value);
                              setIsChange(true);
                            }}
                            onSubmit={value => {
                              if (isChange) {
                                handleSave({ name: value }, vendor.id);
                                setIsChange(false);
                              }
                              if (!value.length) window.location.reload();
                            }}
                            submitOnBlur={false}
                          >
                            <EditablePreview />
                            <EditableInput />
                          </Editable>
                        </Td>
                      </Tr>
                    ))}
                  </Tbody>
               </Table>