React Material-UI Cookbook

How it works...

When you click on a category, the down arrow icon changes to an up arrow. Beneath the category, the list items belonging to that category are displayed. Let's break down what's happening in this code, starting with the component state:

const [items, setItems] = useState([  {    name: 'Messages',    Icon: InboxIcon,    expanded: false,    children: [      { name: 'First Message', Icon: MailIcon },      { name: 'Second Message', Icon: MailIcon }    ]  },  {    name: 'Contacts',    Icon: ContactsIcon,    expanded: false,    children: [      { name: 'First Contact', Icon: ContactMailIcon },      { name: 'Second Contact', Icon: ContactMailIcon }    ]  }]);

Each object in the items array represents a list category. In this case, the categories are Messages and Contacts. The Icon property ...