React Material-UI Cookbook

How to do it...

Let's say that you have four categories of messages that can be displayed by your app. To access a given category, the user clicks on one of the list items. To help the user understand the categories, you'll use icons. And to make the icons stand out against the primary and secondary text of the list item, you'll wrap it with an Avatar component. Here's the code:

import React, { useState } from 'react';import clsx from 'clsx';import Avatar from '@material-ui/core/Avatar';import List from '@material-ui/core/List';import ListItem from '@material-ui/core/ListItem';import ListItemText from '@material-ui/core/ListItemText';import ListItemIcon from '@material-ui/core/ListItemIcon';import MarkunreadIcon from '@material-ui/icons/Markunread'; ...