React Material-UI Cookbook

How it works...

Let's start by looking at the items state:

const [items, setItems] = useState([  { name: 'First Item', timestamp: new Date() },  { name: 'Second Item', timestamp: new Date() },  { name: 'Third Item', timestamp: new Date() }]);

The name property is the primary text, and the timestamp property is the secondary text for each list item. Next, let's look at the List markup that transforms this state into rendered list items:

<List>  {items.map((item, index) => (    <ListItem key={index} button dense>      <ListItemText        primary={item.name}        secondary={item.timestamp.toLocaleString()}      />    </ListItem>  ))}</List>

The ListItem component has two Boolean properties passed to it – button and dense. The button property makes the list item behave like ...