React Material-UI Cookbook

There's more...

You might want to separate the rendering of list items into its own component. This way, you can use the list items in other places. For example, you might want to use the same rendering logic to render a list of buttons elsewhere in your app. Here's an example of how you can extract the ListItems component into its own component:

const ListItems = ({ items, onClick }) =>  items    .filter(({ hidden }) => !hidden)    .map(({ label, disabled, Icon }, i) => (      <ListItem        button        key={i}        disabled={disabled}        onClick={onClick(label)}      >        <ListItemIcon>          <Icon />        </ListItemIcon>        <ListItemText>{label}</ListItemText>      </ListItem>    ));

The ListItems component will return an array of ListItem components. It takes the items state to render as an array ...