モーダルを開いても正しい内容が表示されない！？

はじめに

モーダルを開くボタンを複数表示させたのはいいけれど、どのボタンをクリックしてもモーダルに表示されるコンテンツが同じになってしまう…。そんな時はコンテンツを識別するidをモーダルに渡してあげよう！

コードサンプル

  const [loading, setLoading] = useState(false);
  const [hogeDatas, setHogeDatas] = useState([]);
  const [isModalOpen, setIsModalOpen] = useState(false);

    async function openModal(id) {
      setLoading(true);

      await UseAxios('get', 'hogehoge')
        .then(function (res) {
          if (res && res.data && res.data.response) {
            let d = datas.filter((data) =>
              res.data.response.dataIds.includes(data.id)
            );
            setHogeDatas(d);
            setIsModalOpen(true);
            setLoading(false);
          }
        })
        .catch(function (error) {
          console.log(error);
          console.log(error.response);
          setLoading(false);
        });
    }


  function Content() {
  //　モーダル内で表示させたいデータと対応するid
    return filterHoges.map((hoge) => {
      let idx = hoge.id;
    略
        onClick={() => openModal(idx)}
    }

  return (
    <Content></Content>
    )

おわりに

idなどを渡してあげないと、非同期で取得し終わった最後のコンテンツがどのモーダルにも表示されることになります。