【React】チェックボックスにドハマリした

Reactでチェックボックスにドハマリしました。
自分自身のメモのために記録します。

機能的にはONにしたら親コンポーネントの一覧に表示、OFFにしたら一覧から削除という単純な流れ。

修正前

 <input
	type="checkbox"
	id={album.id}
	className={albumArtList.some((item) => item.id === album.id) ? 'selected' : 'select'}
	checked={albumArtList.some((item) => item.id === album.id)}
	onChange={() => handleChange(album.id, album.name, album.images[0]?.url, album.artists.map((value) => value.name).join(','))}
/>

<label
htmlFor={album.id} className={albumArtList.some((item) => item.id === album.id) ? 'l-button bg-orange txt-white action ta-center' : 'l-button bg-turquoise txt-white action ta-center'}>
{albumArtList.some((item) => item.id === album.id) ? '選択中' : '選択'}
</label>

SpotifyAPIから取得してきたアルバムデータを表示しているだけの、単純なチェックボックスです。
この状態では、チェックボックスをONに設定はできるもののOFFにできない…という状態に。

検証

このチェックボックスですが、スタイルでチェックボックス自体は非表示にしていました。
checkedの真偽ロジックがおかしいのか検証している中で、スタイルを無効化し直接チェックボックスを操作すると希望通りの動きに…。
チェックボックス自体とラベルの連動がおかしいという原因を見つけました。

修正後

 <input
	type="checkbox"
	id={`checkbox-${album.id}`}
	className={albumArtList.some((item) => item.id === album.id) ? 'selected' : 'select'}
	checked={albumArtList.some((item) => item.id === album.id)}
	onChange={() => handleChange(album.id, album.name, album.images[0]?.url, album.artists.map((value) => value.name).join(','))}
/>

<label
htmlFor={`checkbox-${album.id}`} className={albumArtList.some((item) => item.id === album.id) ? 'l-button bg-orange txt-white action ta-center' : 'l-button bg-turquoise txt-white action ta-center'}>
{albumArtList.some((item) => item.id === album.id) ? '選択中' : '選択'}
</label>

変更点はidとhtmlForの部分です。
アルバムごとに動的に生成していたのですが、一時的にDOM上の一致が崩れ関連付けできなかったみたいです。
それぞれにプレフィックスをつけることで解決しました。