Selection Checkbox in React using Hooks

Seems you are just missing local component state to track the checked status of each checkbox, including the checkbox in the table header.

Here is the implementation for the AddedPersons component since it's more interesting because it has more than one row of data.

1. Create state to hold the selected persons state. Only add the additional local state, no need to duplicate the passed body prop data (this is anti-pattern anyway) nor add any derived state, i.e. is indeterminate or is all selected (also anti-pattern).

   const [allSelected, setAllSelected] = React.useState(false);
   const [selected, setSelected] = React.useState({});
   

2. Create handlers to toggle the states.

   const toggleAllSelected = () => setAllSelected((t) => !t);
   
   const toggleSelected = (id) => () => {
     setSelected((selected) => ({
       ...selected,
       [id]: !selected[id]
     }));
   };
   

3. Use a useEffect hook to toggle all the selected users when the allSelected state is updated.

   React.useEffect(() => {
     body.persons?.added_persons &&
       setSelected(
         body.persons.added_persons.reduce(
           (selected, { id }) => ({
             ...selected,
             [id]: allSelected
           }),
           {}
         )
       );
   }, [allSelected, body]);
   

4. Compute the selected person count to determine if all users are selected manually or if it is "indeterminate".

   const selectedCount = Object.values(selected).filter(Boolean).length;
   
   const isAllSelected = selectedCount === body?.persons?.added_persons?.length;
   
   const isIndeterminate =
     selectedCount && selectedCount !== body?.persons?.added_persons?.length;
   

5. Attach all the state and callback handlers.

   return (
     <>
       <TableContainer className={classes.tableContainer}>
         <Table>
           <TableHead className={classes.tableHead}>
             <TableRow>
               <TableCell colSpan={4}>{selectedCount} selected</TableCell>
             </TableRow>
             <TableRow>
               <TableCell padding="checkbox">
                 <Checkbox
                   checked={allSelected || isAllSelected}      // <-- all selected
                   onChange={toggleAllSelected}                // <-- toggle state
                   indeterminate={isIndeterminate}             // <-- some selected
                   inputProps={{ "aria-label": "select all desserts" }}
                 />
               </TableCell>
               ...
             </TableRow>
           </TableHead>
           <TableBody>
             {body?.persons?.added_persons?.map((row, index) => (
               <TableRow key={row.id}>
                 <TableCell padding="checkbox">
                   <Checkbox
                     checked={selected[row.id] || allSelected} // <-- is selected
                     onChange={toggleSelected(row.id)}         // <-- toggle state
                   />
                 </TableCell>
                 <TableCell align="left">{row.id}</TableCell>
                 <TableCell align="left">{row.name}</TableCell>
               </TableRow>
             ))}
           </TableBody>
         </Table>
       </TableContainer>
     </>
   );
   

Update

Seems there was a bug in my first implementation that disallowed manually deselecting people while the select all checkbox was checked. The fix is to move the logic in the useEffect into the toggleAllSelected handler and use the onChange event to toggle all the correct states. Also to add a check to toggleSelected to deselect "select all" when any person checkboxes have been deselected.

const [allSelected, setAllSelected] = React.useState(false);
const [selected, setSelected] = React.useState({});

const toggleAllSelected = (e) => {
  const { checked } = e.target;
  setAllSelected(checked);

  body?.persons?.added_persons &&
    setSelected(
      body.persons.added_persons.reduce(
        (selected, { id }) => ({
          ...selected,
          [id]: checked
        }),
        {}
      )
    );
};

const toggleSelected = (id) => (e) => {
  if (!e.target.checked) {
    setAllSelected(false);
  }

  setSelected((selected) => ({
    ...selected,
    [id]: !selected[id]
  }));
};

Note: Since both AddedPersons and ExcludedPersons components are basically the same component, i.e. it's a table with same headers and row rendering and selected state, you should refactor these into a single table component and just pass in the row data that is different. This would make your code more DRY.