Abstracting checkbox groups

Checkboxes often provide the user with a group of related options that can be checked or unchecked. The Material-UI Checkbox component provides the base functionality, but you might want something a little more high level that can be reused throughout your application.

How to do it...

Let's create an abstraction for groups of checkbox options. Here's the code for a CheckboxGroup component:

import React, { useState } from 'react';

import FormLabel from '@material-ui/core/FormLabel';
import FormControl from '@material-ui/core/FormControl';
import FormGroup from '@material-ui/core/FormGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel...