Handle multiple Material UI checkboxes in React

Question

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.

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) => ({
  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) => {
      let newArray = [event.target.id];
      if (participant.includes(event.target.id)) {
        newArray = newArray.filter((value) => value !== event.target.id);
      }
      setParticipant(newArray);
    };

    return (
      <div>
        <Grid container spacing={2}>
          <Grid item xs={9}>
            POLICY: XXXXXXXXXX
          </Grid>
          <Grid item xs={3}>
            INSURED: XXXXXXXXXX
          </Grid>
          <Grid item xs={12}>
            <div style={{ backgroundColor: '#E9E9E9', width: '100%' }}>
              <Typography
                variant='body1'
                className={classes.typography}
                style={{
                  marginTop: '10px',
                  marginBottom: '30px',
                  font: 'normal normal medium 20px/24px Allstate Sans W',
                }}
              >
                CLAIM{' '}
              </Typography>
            </div>
          </Grid>
        </Grid>
        <tbody className={classes.Table}>
          {Claim.map((data) => {
            return (
              <tr>
                <td className={classes.Td_Checkbox}>
                  {' '}
                  <Checkbox
                    id={data.name}
                    onChange={handleCheckboxChange}
                    color='default'
                  />{' '}
                </td>
                <td className={classes.Td}>{data.label}</td>
                <td className={classes.Td}>{data.name}</td>
              </tr>
            );
          })}
        </tbody>

        <Grid container spacing={2}>
          <Grid item xs={12}>
            <div style={{ backgroundColor: '#E9E9E9', width: '100%' }}>
              <Typography
                variant='body1'
                className={classes.typography}
                style={{
                  marginTop: '10px',
                  marginBottom: '30px',
                  font: 'normal normal medium 20px/24px Allstate Sans W',
                }}
              >
                DWELLING{' '}
              </Typography>
            </div>
          </Grid>
        </Grid>
        <tbody className={classes.Table}>
          {Dwelling.map((data) => {
            return (
              <tr>
                <td className={classes.Td_Checkbox}>
                  {' '}
                  <Checkbox
                    id={data.name}
                    onChange={handleCheckboxChange}
                    color='default'
                  />{' '}
                </td>
                <td className={classes.Td}>{data.label}</td>
                <td className={classes.Td}>{data.name}</td>
              </tr>
            );
          })}
        </tbody>

        <Grid container spacing={2}>
          <Grid item xs={12}>
            <div style={{ backgroundColor: '#E9E9E9', width: '100%' }}>
              <Typography
                variant='body1'
                className={classes.typography}
                style={{
                  marginTop: '10px',
                  marginBottom: '30px',
                  font: 'normal normal medium 20px/24px Allstate Sans W',
                }}
              >
                UNSCHEDULER PERSONAL PROPERTY{' '}
              </Typography>
            </div>
          </Grid>
        </Grid>
        <tbody className={classes.Table}>
          {Unscheduler_pp.map((data) => {
            return (
              <tr>
                <td className={classes.Td_Checkbox}>
                  {' '}
                  <Checkbox
                    id={data.name}
                    onChange={handleCheckboxChange}
                    color='default'
                  />{' '}
                </td>
                <td className={classes.Td}>{data.label}</td>
                <td className={classes.Td}>{data.name}</td>
              </tr>
            );
          })}
        </tbody>
        {console.log(participant)}
      </div>
    );
  } else {
    return <div></div>;
  }
}

Could you make it clear what you want to achieve? Maybe a sketch or something? — Gonnen Daube
– Gonnen Daube, Commented Sep 30, 2021 at 12:41

Elton1021 · Accepted Answer · 2021-09-30 15:26:53Z

I tried to recreate the above code and found 2 possible solution. 2nd one where logic is handled in App.js is not recommended.

But you can use the 2nd option by creating state in App.js and handling the logic in another component.

I would suggest using redux when you have to use single state in more than 2 child componen.

Logic handled in a separate component
App.js

import "./styles.css";
import Checkbox from "./Checkbox";

const CLAIMS = [
  { 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" }
];

const DWELLINGS = [
  { key: 0, label: "CLAIM HANDLER", name: "DESIREE MOHUKA" },
  { key: 1, label: "CONTROLLLER", name: "XXXXXXXXXXXX" },
  { key: 2, label: "PERFORMER", name: "XXXXXXXXXXXX" }
];

const 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 App() {
  return (
    <div>
      <div>
        <Checkbox list={CLAIMS} title="Claims" />
        <Checkbox list={DWELLINGS} title="Dwellings" />
        <Checkbox list={UNSCHEDULER_PP} title="Unscheduler" />
      </div>
    </div>
  );
}

Checkbox.js

import { useState } from "react";

/* parses check box data from props.list element
 * @params {{title: string, list:{name: string, id: number}[]}} props
 */
const Checkbox = (props) => {
  const [participants, setParticipants] = useState([]);

  // logic to add or remove elements check or unchecked form an array.
  const handleCheckboxChange = (event) => {
    const id = event.target.id;
    setParticipants((currentParticipants) =>
      currentParticipants.includes(id)
        ? currentParticipants.filter((f) => f !== id)
        : [...currentParticipants, id]
    );
  };

  console.log("participants", participants);

  // creates all the checkbox based on the list array.
  const checkbox = props.list.map((m) => (
    <span key={m.key}>
      <input type="checkbox" id={m.key} onClick={handleCheckboxChange} />
      {m.name}
    </span>
  ));

  return (
    <div>
      <div>{checkbox}</div>
      <div>{props.title}</div>
    </div>
  );
};

export default Checkbox;

Logic handled in App.js (not recommended unless necessary)
App.js

import "./styles.css";
import Checkbox from "./Checkbox";
import { useState } from "react";

const CLAIMS = [
  { 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" }
];

const DWELLINGS = [
  { key: 0, label: "CLAIM HANDLER", name: "DESIREE MOHUKA" },
  { key: 1, label: "CONTROLLLER", name: "XXXXXXXXXXXX" },
  { key: 2, label: "PERFORMER", name: "XXXXXXXXXXXX" }
];

const 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 App() {
  const [claimParticipants, setClaimParticipants] = useState([]);
  const [dwellingParticipants, setDwellingParticipants] = useState([]);
  const [unschedulerParticipants, setUnschedulerParticipants] = useState([]);

  // logic to add or remove elements check or unchecked form an array.
  const handleCheckboxChange = (event, setParticipants) => {
    const id = event.target.id;
    setParticipants((currentParticipants) =>
      currentParticipants.includes(id)
        ? currentParticipants.filter((f) => f !== id)
        : [...currentParticipants, id]
    );
  };

  console.log("claimParticipants", claimParticipants);
  console.log("dwellingParticipants", dwellingParticipants);
  console.log("unschedulerParticipants", unschedulerParticipants);

  return (
    <div>
      <div>
        <Checkbox
          list={CLAIMS}
          title="Claims"
          handleCheckboxChange={(event) =>
            handleCheckboxChange(event, setClaimParticipants)
          }
        />
        <Checkbox
          list={DWELLINGS}
          title="Dwellings"
          handleCheckboxChange={(event) =>
            handleCheckboxChange(event, setDwellingParticipants)
          }
        />
        <Checkbox
          list={UNSCHEDULER_PP}
          title="Unscheduler"
          handleCheckboxChange={(event) =>
            handleCheckboxChange(event, setUnschedulerParticipants)
          }
        />
      </div>
    </div>
  );
}

Checkbox.js

/* parses check box data from props.list element
 * @params {{title: string, handleCheckboxChange: Function, list:{name: string, id: number}[]}}
 */
const Checkbox = (props) => {
  // creates all the checkbox based on the list array.
  const checkbox = props.list.map((m) => (
    <span key={m.key}>
      <input type="checkbox" id={m.key} onClick={props.handleCheckboxChange} />
      {m.name}
    </span>
  ));

  return (
    <div>
      <div>{checkbox}</div>
      <div>{props.title}</div>
    </div>
  );
};

export default Checkbox;

@harshita I would recommend separating your code into components wherever possible. it will help you understand your code in the long run. also add comments.

Collectives™ on Stack Overflow

Handle multiple Material UI checkboxes in React

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related