MUIのCheckboxでCheckboxGroupを作成してみたメモ

import FormControlLabel from '@mui/material/FormControlLabel';
import FormControl from '@mui/material/FormControl';
import MuiCheckbox from '@mui/material/Checkbox';
import { FormGroup } from '@mui/material';

type Props<T> = {
  checkboxesState: Record<string | number, boolean>;
  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
  options: T[];
};

export const CheckboxGroup = <T extends { id: string | number; name: string }>({
  checkboxesState,
  onChange,
  options,
}: Props<T>) => {
  return (
    <FormControl component={'fieldset'}>
      <FormGroup>
        {options.map((option) => {
          return (
            <FormControlLabel
              key={option.id}
              label={option.name}
              control={
                <MuiCheckbox checked={checkboxesState[option.id]} onChange={onChange} name={String(option.id)} />
              }
            />
          );
        })}
      </FormGroup>
    </FormControl>
  );
};

import type { NextPage } from 'next';
import type { AuthPageProps } from '@/components/page/auth/WithAuth';
import { Page } from '@/components/page/common/Page';
import { withAuth } from '@/components/page/auth/WithAuth';
import { useState } from 'react';
import { CheckboxGroup } from '@/components/ui/forms/Checkbox/CheckboxGroup';

const COURSES: { id: number; name: string }[] = [
  { id: 111, name: 'Aコース' },
  { id: 222, name: 'Bコース' },
  { id: 333, name: 'Cコース' },
];

const Index: NextPage<AuthPageProps> = ({ loginUser }) => {
  /**
   * initialState = {
    111: false,
    222: false,
    333: false,
  }
   */
  const initialState = COURSES.reduce((result, current) => {
    result[current.id] = false;
    return result;
  }, {} as Record<string, boolean>);

  const [checkboxes, setCheckboxes] = useState<Record<string, boolean>>(initialState);

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setCheckboxes({ ...checkboxes, [event.target.name]: event.target.checked });
  };

  return (
      <Page layout={'manager'} loginUser={loginUser}>
        <CheckboxGroup checkboxesState={checkboxes} onChange={handleChange} options={COURSES} />
      </Page>
  );
};

export default withAuth(Index);

// ① 選択している値を配列で持つ
const checkboxGroupState = ['banana', 'apple']

// ② 選択していない値まで含めた形でオブジェクトで持つ
const checkboxGroupState = {
  banana: true,
  grape: false,
  apple: true,
}

// ③ 選択している真偽値の状況を配列で持つ（第3の択が出現した）（参考：https://engineering.linecorp.com/ja/blog/line-securities-frontend-3）
const checkboxGroupState = [true, false, true]

// ①の更新（チェック状況配列に対象が含まれているかで条件分岐して更新）
const onChange = (event) => {
  const target = event.target.name
  setState(state.includes(target) ? state.filter((item) => item !== target) : [...state, target])
}

// ②の更新（チェック状態オブジェクトをスプレッド展開した上で、対象のチェック状況を更新）
const onChange = (event) => {
  setState({ ...state, [event.target.name]: event.target.checked })
}

// ①のチェック状態の判定
checked={state.includes(option.id)}

// ②のチェック状態の判定
checked={state[option.id]}