React Material-UI Cookbook

How it works...

Let's start by taking a look at the state of your component, as follows:

const [open, setOpen] = useState(false);const [content, setContent] = useState('Home');const [items] = useState({  cpu: [    { label: 'Add CPU', Icon: AddIcon },    { label: 'Remove CPU', Icon: RemoveIcon },    { label: 'Usage', Icon: ShowChartIcon }  ],  memory: [    { label: 'Add Memory', Icon: AddIcon },    { label: 'Usage', Icon: ShowChartIcon }  ],  storage: [    { label: 'Add Storage', Icon: AddIcon },    { label: 'Usage', Icon: ShowChartIcon }  ],  network: [    { label: 'Add Network', Icon: AddIcon, disabled: true },    { label: 'Usage', Icon: ShowChartIcon }  ]});

Instead of the items state being a flat array of items, it's now an object with arrays grouped by category. These ...