0

現在、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の管理が見つからなかったのでどなたかご教授いただけると幸いです。

1 件の回答 1

0

"apiのデータ"checkbox選択状態 を組にしたものを、親コンポーネントの useState で管理することで期待する挙動は実現できるかと思います。

export default function Favorite() {
  const [state, setState] = useState();
  const testUrl = "";
  const fetcher = (url) =>
    fetch(url)
      .then((r) => r.json())
      .then((json) => {
        const newState = /* "apiのデータ" とcheckbox選択状態の組を生成 */ [{apiData: {/*...*/}, checked: false}];
        setState(newState);
      });
  useSWR(testUrl, fetcher);
...

サンプルコード

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。