React Material-UI Cookbook

There's more...

This example could have used props instead of state, because the items never changed. Let's modify it so that the user can select items from the list. Here's what the new List markup looks like:

<List>  {items.map((item, index) => (    <ListItem      key={index}      button      dense      selected={item.selected}      onClick={onClick(index)}    >      <ListItemText        primary={item.name}        secondary={item.timestamp.toLocaleString()}        primaryTypographyProps={{          color: item.selected ? 'primary' : undefined        }}      />    </ListItem>  ))}</List>

The selected property passed to the ListItem component will apply selected styles to the item when true. This value comes from the item.selected state, which is false by default for every item (nothing is selected). Next, the ListItem ...