Let's look at the markup that's used to render each list item:
<ListItem key={index} button> <ListItemIcon> <Icon /> </ListItemIcon> <ListItemText primary={item.name} /> <ListItemSecondaryAction> <IconButton onClick={onBluetoothClick(index, 'bluetooth')} > <MaybeBluetoothIcon bluetooth={item.bluetooth} /> </IconButton> </ListItemSecondaryAction></ListItem>
The ListItemSecondaryAction component is used as a container for any controls in your list item. In this example, an IconButton is used as the control. It shows a different icon depending on the state of the item, using the MaybeBluetoothIcon component. The onBluetoothClick() function is used to return the event handler function for the item. Let's take a look at this function: ...
