React Material-UI Cookbook

How it works...

Let's take a closer look at the CheckboxGroup component:

const CheckboxGroup = ({ values, label, onChange }) => (  <FormControl component="fieldset">    <FormLabel component="legend">{label}</FormLabel>    <FormGroup>      {values.map((value, index) => (        <FormControlLabel          key={index}          control={            <Checkbox              checked={value.checked}              onChange={onChange(index)}            />          }          label={value.label}        />      ))}    </FormGroup>  </FormControl>);

This is the abstraction that allows you to render groups of checkbox options on the various screens throughout your app. There are several Material-UI components involved with rendering a group of checkboxes—CheckboxGroup takes care of this for you so that you just need to worry about passing it an array of values, label, and ...