Reactでリスト内のIDを使用してモーダルを表示する方法

リストを準備する: まず、表示したいアイテムのリストを作成します。それぞれのアイテムには一意のIDが必要です。例えば、以下のようなデータ構造を考えてみましょう:

const itemList = [
  { id: 1, name: 'アイテム1' },
  { id: 2, name: 'アイテム2' },
  { id: 3, name: 'アイテム3' },
  // ... 追加のアイテム
];

モーダルの状態を管理する: Reactの状態管理フックを使用して、モーダルの表示状態を追跡します。例えば、以下のようにuseStateフックを使用してモーダルの表示状態を管理できます:

const [modalOpen, setModalOpen] = useState(false);

モーダルをトリガーするクリックハンドラを作成する: リスト内の各アイテムをクリックしたときに、該当するアイテムのIDを使用してモーダルを表示するためのクリックハンドラを作成します。例えば、以下のようにhandleItemClick関数を作成します:

const handleItemClick = (itemId) => {
  // モーダルを表示する処理
  setModalOpen(true);
  // 他の必要な処理
};

リストアイテムをレンダリングする: リスト内の各アイテムをレンダリングし、クリックイベントを設定します。アイテムがクリックされたときにhandleItemClick関数を呼び出すようにします。例えば、以下のようにmap関数を使用してリストアイテムをレンダリングします:

{itemList.map((item) => (
  <div key={item.id} onClick={() => handleItemClick(item.id)}>
    {item.name}
  </div>
))}

モーダルを表示する: モーダルの表示には、条件付きレンダリングを使用します。モーダルが開いている場合にのみ表示するようにします。例えば、以下のように条件付きレンダリングを行います:

{modalOpen && (
  <div className="modal">
    // モーダルの内容
  </div>
)}

以上の手順に従うと、リスト内の特定のIDを使用してモーダルを表示することができます。適切なスタイリングとモーダルの内容を追加して、必要に応じてカスタマイズしてください。