Nested lists

Lists can be nested. This is useful when you have a large number of items to render. Instead of showing everything all at once, you can only display those item categories. Then the user can click on these categories to display the items.

How to do it...

Let's say that you have two item categories. When the user clicks on a category, the items in that category should be displayed. Here's the code to do this, by using the List component:

import React, { useState, Fragment } from 'react';

import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
import ListItemIcon from &apos...