List sections

Once your lists have more than just a few items in them, you might want to consider organizing the items into sections. To do this, you split your lists into several smaller lists, which are stacked on top of one another with a divider in between them.

How to do it...

Let's say that you have several list items that can be divided into three sections. You can use three List components to group your items into their respective sections, and use a Divider component to visually indicate the section boundary for the user. Here's what the code looks like:

import React, { Fragment } from 'react';

import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem...