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 a button. For example, if you move your mouse pointer over an item in the list, you'll see the hover styles applied to it. The dense property removes extra padding from the list item. Without this property, the list takes up more space on the screen.

The ListItemText component uses the primary and secondary properties to render the name and timestamp properties respectively. The primary text is meant to stand out relative to the secondary information displayed in the item – in this case, the timestamp.