異なる説明を持つ個別のモーダルを作成するにはどうすればよいですか?

Question

自動車ディーラーの Web サイトを作成しています。ユーザーが車の写真の下のボタンをクリックしたときに、モーダルにその車に関する情報のみが表示されるようにしたいと考えています。これまでのところ、複数のモーダル ボタンを正常に作成できましたが、それらはすべて同じ情報を表示します。

異なる情報を含む個別のモーダルを作成するにはどうすればよいですか?

import "./Modal.css";
'../Images/pagani2.jpg' からパガーニをインポートします。
'../Images/pagani.jpg' から Pagani1 をインポートします。
'../Images/p1.jpg' から p1 をインポートします。
'../Images/r342.jpg' から r342 をインポートします。


import * as React from 'react';
'@mui/material/Box' からボックスをインポートします。
'@mui/material/Button' からボタンをインポートします。
タイポグラフィを「@mui/material/Typography」からインポートします。
'@mui/material/Modal' からモーダルをインポートします。

const スタイル = {
  位置: '絶対'、
  上: '50%'、
  左: '50%'、
  変換: 'translate(-50%, -50%)',
  幅: 400、
  bgcolor: '背景.紙',
  境界線: '2px ソリッド #000',
  ボックスシャドウ: 24、
  p:4、
};

デフォルト関数 BasicModal() をエクスポート {
  const [open, setOpen] = React.useState(false);
  const handleOpen = () => setOpen(true);
  const handleClose = () => setOpen(false);

戻る （
<div>
  <Button onClick={handleOpen}>モーダル ボックスを開く</Button>
  <モーダル
    開く={開く}
    onClose={ハンドルクローズ}
    aria-labeledby="モーダル-モーダル-タイトル"
    aria-descriptionby="モーダル-モーダル-説明"
  >
    <ボックス sx={スタイル}>
      <タイポグラフィ id="modal-modal-title" バリアント="h6" コンポーネント="h2">
        モーダルボックス内のテキスト
      </タイポグラフィ>
      <タイポグラフィ id="modal-modal-description" sx={{ mt: 2 }}>
        Duis mollis、est non commodo luctus、nisi erat portitor ligula。
      </タイポグラフィ>
    </ボックス>
  </モーダル>
</div>
); }

Answer 1

各車のコンテンツをカスタマイズするための小道具を受け入れるモーダルのより汎用的なコンポーネントを作成できます。
carImage、carTitle、carDescription を小道具として受け入れる CarModal という名前の新しいコンポーネントを作成します。

これで、このコンポーネントを

Cars コンポーネント (車を表示するコンポーネント) 内で複数回使用して、車ごとに個別のモーダルを作成できるようになります。適切な props を渡すだけです リーリー リーリー