How can I check all child items when the main head is checked and vice-versa?

I am making a dropdown list in which I want to select all the sub-items if the main head is checked, and select the head, if all the sub-items are checked.

const DropDownList = ({ data }) => {
  const [open, setOpen] = useState({});
  const [checked, setChecked] = useState({});

  const handleClick = (department) => {
    setOpen((prevOpen) => ({
      ...prevOpen,
      [department]: !prevOpen[department],
    }));
  };

  const handleCheck = (item) => {
    setChecked((prevChecked) => ({
      ...prevChecked,
      [item]: !prevChecked[item],
    }));
  };

  return (
    <List>
      {data.map((department) => (
        <React.Fragment key={department.department}>
          <ListItem
            sx={{ cursor: "pointer" }}
            onClick={() => handleClick(department.department)}
          >
            <Checkbox
              checked={checked[department.department] || false}
              onChange={() => handleCheck(department.department)}
            />
            <ListItemText primary={department.department} />
            {open[department.department] ? <ExpandLess /> : <ExpandMore />}
          </ListItem>
          <Collapse in={open[department.department]} unmountOnExit>
            <List
              component="div"
              sx={{ padding: "0 35px", cursor: "pointer" }}
              disablePadding
            >
              {department.sub_departments.map((subDepartment) => (
                <ListItem key={subDepartment}>
                  <Checkbox
                    checked={checked[subDepartment] || false}
                    onChange={() => handleCheck(subDepartment)}
                  />
                  <ListItemText primary={subDepartment} />
                </ListItem>
              ))}
            </List>
          </Collapse>
        </React.Fragment>
      ))}
    </List>
  );
};

export default DropDownList;

This is my List component.

I know the logic, but I can't implement it. I don't know how to. I know that by checking if all sub-items are checked, we can check the head too, but I don't know how to implement this bit.

For "select all the sub-items if the main head is checked", consider modifying handleCheck() to pass an item object. This will let us know of the checked item's sub_departments:

const handleCheck = (item) => {
  setChecked((prevChecked) => ({
    ...prevChecked,
    [item.department]: !prevChecked[item.department],
  }));
};
…
<Checkbox
  …
  onChange={() => handleCheck(department)}
/>
…
<Checkbox
  …
  onChange={() => handleCheck({ department: subDepartment })}
/>

If it is being checked, check its sub_departments:

const handleCheck = (item, parent = {}) => {
  setChecked((prevChecked) => {
    const list = {
      ...prevChecked,
      [item.department]: !prevChecked[item.department],
    };

    if (list[item.department]) {
      if (item.sub_departments) {
        item.sub_departments.forEach(sub => {
          list[sub] = true;
        });
      }
    }

    return list;
  });
};

For "select the head, if all the sub-items are checked", pass in the parent department item as a second argument to handleCheck():

const handleCheck = (item, parent = {}) => {
  …
}
…
<Checkbox
  …
  onChange={() => handleCheck({ department: subDepartment }, department)}
/>

Then check the parent department if all the sub_departments are checked:

const handleCheck = (item, parent = {}) => {
  setChecked((prevChecked) => {
    const list = {
      ...prevChecked,
      [item.department]: !prevChecked[item.department],
    };

    if (list[item.department]) {
      …
      if (parent.sub_departments && parent.sub_departments.length) {
        let checkParent = true;

        for (const subItem of parent.sub_departments) {
          if (!list[subItem]) {
            checkParent = false;
            break;
          }
        }

        if (checkParent) {
          list[parent.department] = true;
        }
      }
    }

    return list;
  });
};

Full example:

<!-- begin snippet: js hide: false console: false babel: true -->

<!-- language: lang-js -->

const { useState } = React;
const { List, ListItem, Checkbox, ListItemText, Collapse } = MaterialUI;
const ExpandMore = () => 'ExpandMore';
const ExpandLess = () => 'ExpandLess';
const DropDownList = ({ data }) => {
const [open, setOpen] = useState({});
const [checked, setChecked] = useState({});
const handleClick = (department) => {
setOpen((prevOpen) => ({
...prevOpen,
[department]: !prevOpen[department],
}));
};
const handleCheck = (item, parent = {}) => {
setChecked((prevChecked) => {
const list = {
...prevChecked,
[item.department]: !prevChecked[item.department],
};
if (list[item.department]) {
if (item.sub_departments) {
item.sub_departments.forEach(sub => {
list[sub] = true;
});
}
if (parent.sub_departments && parent.sub_departments.length) {
let checkParent = true;
for (const subItem of parent.sub_departments) {
if (!list[subItem]) {
checkParent = false;
break;
}
}
if (checkParent) {
list[parent.department] = true;
}
}
}
return list;
});
};
return (
<List>
{data.map((department) => (
<React.Fragment key={department.department}>
<ListItem
sx={{ cursor: "pointer" }}
onClick={() => handleClick(department.department)}
>
<Checkbox
checked={checked[department.department] || false}
onChange={() => handleCheck(department)}
/>
<ListItemText primary={department.department} />
{open[department.department] ? <ExpandLess /> : <ExpandMore />}
</ListItem>
<Collapse in={open[department.department]} unmountOnExit>
<List
component="div"
sx={{ padding: "0 35px", cursor: "pointer" }}
disablePadding
>
{department.sub_departments.map((subDepartment) => (
<ListItem key={subDepartment}>
<Checkbox
checked={checked[subDepartment] || false}
onChange={() => handleCheck({ department: subDepartment }, department)}
/>
<ListItemText primary={subDepartment} />
</ListItem>
))}
</List>
</Collapse>
</React.Fragment>
))}
</List>
);
};
ReactDOM.createRoot(document.getElementById('app')).render(
<DropDownList
data={[
{
department: 'Fruit',
sub_departments: ['apple', 'pear', 'orange'],
},
{
department: 'Colors',
sub_departments: ['Red', 'Green', 'Blue'],
},
]}
/>
);

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js" integrity="sha512-8Q6Y9XnTbOE+JNvjBQwJ2H8S+UV4uA6hiRykhdtIyDYZ2TprdNmWOUaKdGzOhyr4dCyk287OejbPvwl7lrfqrQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js" integrity="sha512-MOCpqoRoisCTwJ8vQQiciZv0qcpROCidek3GTFS6KTk2+y7munJIlKCVkFCYY+p3ErYFXCjmFjnfTTRSC1OHWQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://unpkg.com/@mui/material@v5.14.1/umd/material-ui.development.js"></script>
<div id="app"></div>

<!-- end snippet -->