React Material-UI Cookbook

There's more...

Let's add a List component to this example so that you can better visualize the state changes that happen when checkboxes are checked/unchecked. Here's the additional Material-UI components that you'll need to import:

import List from '@material-ui/core/List';import ListItem from '@material-ui/core/ListItem';import ListItemIcon from '@material-ui/core/ListItemIcon';import ListItemText from '@material-ui/core/ListItemText';import Typography from '@material-ui/core/Typography';

The idea is to have this list render the labels of checked items. Let's render this list right below the CheckboxGroup component:

<Fragment>  <CheckboxGroup    label="Choices"    values={values}    onChange={onChange}  /> <Typography variant="h6">Selection</Typography> ...