現在、next.jsで実装を進めているのですが、上記にある通り、複数のチェックボックスのチェック状態をstateで管理、また違うコンポーネントにあるボタンを押すとチェック状態が全選択もう一度押すと全解除というような実装をしたいのですが、どのようにすれば良いのか見当がつきません。
また、複数のチェックボックスというものはapiのデータから作られており、子コンポーネントでmapで回している状態です。
親コンポーネント
export default function Favorite() {
const testUrl = ''
const fetcher = url => fetch(url).then(r => r.json())
let data = useSWR(testUrl, fetcher)
let newdata = data.data
return(
<FavoriteBuild changeChecked={changeChecked} checked={checked} data={newdata}/>
↓ このコンポーネントの特定のボタンを押すと全選択全解除
<UserFavoriteHeader />
)
子コンポーネント
export default function FavoritecheckBox(props){
let newdata = props.newdata
return(
{newdata.map((value,idx)=>(
<input onChange={props.changeChecked} checked={props.checked}> ここのinputのチェック状態を親コンポーネントで管理したい
))}
)
}
不要なコードは省き簡略的に書いております。申し訳ありません。
調べても、あまりこのようなstateの管理が見つからなかったのでどなたかご教授いただけると幸いです。