React Material-UI Cookbook

How to do it...

Let's say that you have an array of user objects that you want to render in a List. You could render each item with a user icon to make it clear what each item in the list is. The code for this is as follows:

import React, { useState } 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 '@material-ui/core/ListItemIcon';import AccountCircleIcon from '@material-ui/icons/AccountCircle';export default function ListIcons() {  const [items, setItems] = useState([    { name: 'First User' },    { name: 'Second User' },    { name: 'Third User' }  ]);  return (    <List>      {items.map((item, index) => ( <ListItem key={index} ...