

現在、next.jsで実装を進めているのですが、上記にある通り、複数のチェックボックスのチェック状態をstateで管理、また違うコンポーネントにあるボタンを押すとチェック状態が全選択もう一度押すと全解除というような実装をしたいのですが、どのようにすれば良いのか見当がつきません。  
また、複数のチェックボックスというものはapiのデータから作られており、子コンポーネントでmapで回している状態です。

親コンポーネント

[code]

    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 />
    
        )
    
[/code]

子コンポーネント

[code]

    export default function FavoritecheckBox(props){
        let newdata = props.newdata
            return(
                {newdata.map((value,idx)=>(
                      <input onChange={props.changeChecked} checked={props.checked}> ここのinputのチェック状態を親コンポーネントで管理したい
                 ))}
            )
        }
    
[/code]

不要なコードは省き簡略的に書いております。申し訳ありません。  
調べても、あまりこのようなstateの管理が見つからなかったのでどなたかご教授いただけると幸いです。


CC BY-SA 4.0
2021-10-01T04:32:22.633
82786
2023-09-03T01:01:45.227
2021-10-01T04:48:47.790
3060
48438
question
javascript reactjs next.js react-jsx
reactで複数のチェックボックス（全選択・全解除）実装したい


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

[code]

    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);
    ...
    
[/code]

[サンプルコード](https://codesandbox.io/s/blissful-
cartwright-m7nn9?file=/src/Favorite.tsx)


CC BY-SA 4.0
2021-10-01T14:22:39.533
82809
2021-10-01T14:22:39.533
2808
82786
answer