React+TypeScript: checkboxをmapする

はじめに

Reactでmapの中にcheckboxを入れた時の用例を探してあったのをローカルとcodepenで動く様になりました。

実行例

See the Pen Untitled by kalz2q (@kalz2q) on CodePen.

説明

元記事 Reactでフォームを扱う方法についてまとめました【React/Input/Radio/Select】

この例ではkeyを指定せずにmapの中にcheckboxを置いていて、checkの管理はhandleChangeの中でやっている。keyを指定する方法は私の徳川歴代将軍名の記事で紹介しているやり方で出来るがあのやり方はデータのidと勘違いしていて混乱している。

mapの中にlistを置けばkeyを指定出来るのでそのやり方も試してみたい。

元記事を移植するに当たりオブジェクト配列の型を指定する必要があった。

type の使い方
type Item = { id: number; ... } // セパレーターはセミコロン 型は大文字始まりにする
const [items, setItems] = useState<Item>( data ) // 型定義は <Item> である。<[Item]> ではない
const data = [ { "id": 1, ... // セパレータはカンマ key は string で大丈夫