React Material-UI Cookbook

How it works...

Let's walk through what's happening here. The initialItems array is the starting point for the construction of the checkboxes:

const initialItems = [  {    name: 'AccountBalance',    Icon: AccountBalanceOutlined,    CheckedIcon: AccountBalance  },  {    name: 'Backup',    Icon: BackupOutlined,    CheckedIcon: Backup  },  {    name: 'Build',    Icon: BuildOutlined,    CheckedIcon: Build  }];

Each item has a name component to identify the checkbox, as well as checked/unchecked Icon components. Next, let's take a look at how the state of the CustomizingCheckboxItems component is initialized:

const [items, setItems] = useState({});useEffect(() => {  setItems(    initialItems.reduce(      (state, item) => ({ ...state, [item.name]: false }),      {}    )  );}, []);

The state is ...