title: Handle multiple Material UI checkboxes in React
body: <p>I have created a page with some checkboxes and I want that the values of the checkboxes checked should be displayed in an array. the checkbox value should be removed if we uncheck the checkbox and added if it is checked. So far I have this code that gives only a single value in the array but I need all the checked values in one array.</p>
  <pre><code>import React from 'react';
  import DropDown from './DropDown';
  import TextField from '@material-ui/core/TextField';
  import TextareaAutosize from '@material-ui/core/TextareaAutosize';
  import RadioButton from './RadioButtons';
  import MultiSelect from './MultiSelect';
  import Typography from '@material-ui/core/Typography';
  import { makeStyles } from '@material-ui/core/styles';
  import FormControl from '@material-ui/core/FormControl';
  import Grid from '@material-ui/core/Grid';
  import Paper from '@material-ui/core/Paper';
  import Button from '@material-ui/core/Button';
  import Box from '@material-ui/core/Box';
  import { DropzoneDialog } from 'material-ui-dropzone';
  import createpagestyle from './Createpage.css';
  import Chip from '@material-ui/core/Chip';
  import AddCircleIcon from '@material-ui/icons/AddCircle';
  import Checkbox from '@material-ui/core/Checkbox';
  import { grey } from '@material-ui/core/colors';
  import { useState } from 'react';
  
  const useStyles = makeStyles((theme) =&gt; ({
    typography: {
      fontSize: '3.5 rem',
      fontWeight: '550',
      color: '#0E1941',
  
      [theme.breakpoints.down('md')]: {
        fontSize: '0.5rem',
      },
      [theme.breakpoints.up('md')]: {
        fontSize: '1.0rem',
      },
      [theme.breakpoints.up('lg')]: {
        fontSize: '1.2rem',
      },
    },
  
    Table: {
      width: '60%',
    },
  
    Td: {
      width: '250px',
    },
    Td_Checkbox: {
      width: '60px',
    },
  }));
  
  var Claim = [
    { key: 0, label: 'CLAIM OWNER', name: 'DESIREE MOHUKA' },
    { key: 1, label: 'AUTHORITY CONSULTANT', name: 'XXXXXXXXXXXX' },
    { key: 2, label: 'PROCESSOR CLAIM', name: 'XXXXXXXXXXXX' },
    { key: 3, label: 'CONTROLLLER', name: 'XXXXXXXXXXXX' },
    { key: 4, label: 'MANAGER', name: 'XXXXXXXXXXXX' },
  ];
  
  var Dwelling = [
    { key: 0, label: 'CLAIM HANDLER', name: 'DESIREE MOHUKA' },
    { key: 1, label: 'CONTROLLLER', name: 'XXXXXXXXXXXX' },
    { key: 2, label: 'PERFORMER', name: 'XXXXXXXXXXXX' },
  ];
  
  var Unscheduler_pp = [
    { key: 0, label: 'CLAIM HANDLER', name: 'DESIREE MOHUKA' },
    { key: 1, label: 'CONTROLLLER', name: 'XXXXXXXXXXXX' },
    { key: 2, label: 'PERFORMER', name: 'XXXXXXXXXXXX' },
  ];
  
  export default function Participantpage(props) {
    if (props.visibility) {
      const classes = useStyles();
      const [participant, setParticipant] = React.useState([]);
  
      let handleCheckboxChange = (event) =&gt; {
        let newArray = [event.target.id];
        if (participant.includes(event.target.id)) {
          newArray = newArray.filter((value) =&gt; value !== event.target.id);
        }
        setParticipant(newArray);
      };
  
      return (
        &lt;div&gt;
          &lt;Grid container spacing={2}&gt;
            &lt;Grid item xs={9}&gt;
              POLICY: XXXXXXXXXX
            &lt;/Grid&gt;
            &lt;Grid item xs={3}&gt;
              INSURED: XXXXXXXXXX
            &lt;/Grid&gt;
            &lt;Grid item xs={12}&gt;
              &lt;div style={{ backgroundColor: '#E9E9E9', width: '100%' }}&gt;
                &lt;Typography
                  variant='body1'
                  className={classes.typography}
                  style={{
                    marginTop: '10px',
                    marginBottom: '30px',
                    font: 'normal normal medium 20px/24px Allstate Sans W',
                  }}
                &gt;
                  CLAIM{' '}
                &lt;/Typography&gt;
              &lt;/div&gt;
            &lt;/Grid&gt;
          &lt;/Grid&gt;
          &lt;tbody className={classes.Table}&gt;
            {Claim.map((data) =&gt; {
              return (
                &lt;tr&gt;
                  &lt;td className={classes.Td_Checkbox}&gt;
                    {' '}
                    &lt;Checkbox
                      id={data.name}
                      onChange={handleCheckboxChange}
                      color='default'
                    /&gt;{' '}
                  &lt;/td&gt;
                  &lt;td className={classes.Td}&gt;{data.label}&lt;/td&gt;
                  &lt;td className={classes.Td}&gt;{data.name}&lt;/td&gt;
                &lt;/tr&gt;
              );
            })}
          &lt;/tbody&gt;
  
          &lt;Grid container spacing={2}&gt;
            &lt;Grid item xs={12}&gt;
              &lt;div style={{ backgroundColor: '#E9E9E9', width: '100%' }}&gt;
                &lt;Typography
                  variant='body1'
                  className={classes.typography}
                  style={{
                    marginTop: '10px',
                    marginBottom: '30px',
                    font: 'normal normal medium 20px/24px Allstate Sans W',
                  }}
                &gt;
                  DWELLING{' '}
                &lt;/Typography&gt;
              &lt;/div&gt;
            &lt;/Grid&gt;
          &lt;/Grid&gt;
          &lt;tbody className={classes.Table}&gt;
            {Dwelling.map((data) =&gt; {
              return (
                &lt;tr&gt;
                  &lt;td className={classes.Td_Checkbox}&gt;
                    {' '}
                    &lt;Checkbox
                      id={data.name}
                      onChange={handleCheckboxChange}
                      color='default'
                    /&gt;{' '}
                  &lt;/td&gt;
                  &lt;td className={classes.Td}&gt;{data.label}&lt;/td&gt;
                  &lt;td className={classes.Td}&gt;{data.name}&lt;/td&gt;
                &lt;/tr&gt;
              );
            })}
          &lt;/tbody&gt;
  
          &lt;Grid container spacing={2}&gt;
            &lt;Grid item xs={12}&gt;
              &lt;div style={{ backgroundColor: '#E9E9E9', width: '100%' }}&gt;
                &lt;Typography
                  variant='body1'
                  className={classes.typography}
                  style={{
                    marginTop: '10px',
                    marginBottom: '30px',
                    font: 'normal normal medium 20px/24px Allstate Sans W',
                  }}
                &gt;
                  UNSCHEDULER PERSONAL PROPERTY{' '}
                &lt;/Typography&gt;
              &lt;/div&gt;
            &lt;/Grid&gt;
          &lt;/Grid&gt;
          &lt;tbody className={classes.Table}&gt;
            {Unscheduler_pp.map((data) =&gt; {
              return (
                &lt;tr&gt;
                  &lt;td className={classes.Td_Checkbox}&gt;
                    {' '}
                    &lt;Checkbox
                      id={data.name}
                      onChange={handleCheckboxChange}
                      color='default'
                    /&gt;{' '}
                  &lt;/td&gt;
                  &lt;td className={classes.Td}&gt;{data.label}&lt;/td&gt;
                  &lt;td className={classes.Td}&gt;{data.name}&lt;/td&gt;
                &lt;/tr&gt;
              );
            })}
          &lt;/tbody&gt;
          {console.log(participant)}
        &lt;/div&gt;
      );
    } else {
      return &lt;div&gt;&lt;/div&gt;;
    }
  }
  </code></pre>