React,Typescript,styledを使って作成したオリジナルのチェックボックスでformを作る

開発環境

"react": "^18.2.0",
"typescript": "^5.2.2",
"vite": "^5.0.8"
"styled-components": "^6.1.3"
"@types/styled-components": "^5.1.34"

何故この記事を書こうと思ったのか。

前回作成した記事での、オリジナルのチェックボックスを使用して、フォームを作成しました。
前記事に記載しましたので、是非ご参照いただければと思います。
https://qiita.com/nuhaha_2023/items/682b51d235f73fa9fd37

ディレクトリの構成について

こちらをご参照願います。
https://qiita.com/nuhaha_2023/items/74ccf938bb8de4922c6d

成果物と作成した関数の紹介。

まずは今回作成した関数の紹介。
src直下の、utilsディレクトリ（カスタムフックではない関数の格納場所）を用意しました。

type ListItem = {
  id: string;
  label: string;
};

// 静的な値を設定するために使用。
// idとラベルを用意した配列を渡す。
// ラベルとしての日本語は、あくまでも表示するためだけのものなので、変更する値としてこの関数では扱わない。
export const createBoolArray = (items: ListItem[]): { [id: string]: boolean } => {
  const createVal =  items.reduce((acc, item) => {
    acc[item.id] = false;
    return acc;
  }, {} as { [id: string]: boolean });
  return createVal;
};

// 配列から、trueの値を持っているkey名を抽出、配列として返す
export const extractHaveTrue = (items: { [id: string]: boolean }) => {
  const extractVal = Object.keys(items).filter(key => items[key]);
  return extractVal;
};

formコンポーネントのソースコード

import React, { ChangeEvent, useState } from "react";
import MyCheckBox from "../atoms/MyCheckBox";
import { createBoolArray, extractHaveTrue } from "../../utils/convertForSend";

const Form = () => {
  const list = [
    { id: "male", label: "男" },
    { id: "female", label: "女" },
    { id: "other", label: "不明" },
  ];

  // createBoolArray 関数を使用して初期状態を設定
  const initialCheckBoxState = createBoolArray(list);
  const [gender, setGender] = useState(initialCheckBoxState);

  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
    const { id, checked } = e.target;
    setGender({ ...gender, [id]: checked });
  };

  const extractVal = extractHaveTrue(gender);

  const onSubmitButton = (e: React.FormEvent) => {
    e.preventDefault();
    console.log(gender);
    console.log(extractVal);
  };

  return (
    <form onSubmit={onSubmitButton}>
      {list.map((item) => (
        <MyCheckBox
          key={item.id}
          id={item.id}
          label={item.label}
          checked={gender[item.id]}
          onChange={handleChange}
        />
      ))}
      <button type="submit">送信</button>
    </form>
  );
};

export default Form;

実装の結果

##補足
なんでtrueだけ抜粋する必要が？と感じられる方もいらっしゃるかもしれません、
以前開発でAPIを取り扱った際に、選択状況の送信がすべてnumber[] (バックエンドでいうint型)での送信が必要だったからです。下記URLにて、numberをstringに変更する旨書いてあります！もし参考になりそうであればご覧ください。
https://qiita.com/nuhaha_2023/items/4bdc8168026ac3917017

感想

次回はラジオボタン作るぞー！！