How can I make separate modals with different descriptions?

Question

I'm making a car dealer website and when the user clicks the button below the picture of the car, I want the modal to display only information about that car. So far I have successfully created multiple modal buttons, but they all display the same information.

How do I create separate modals with different information?

import "./Modal.css";
import Pagani from '../Images/pagani2.jpg';
import Pagani1 from '../Images/pagani.jpg';
import p1 from '../Images/p1.jpg';
import r342 from '../Images/r342.jpg';


import * as React from 'react';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';
import Modal from '@mui/material/Modal';

const style = {
  position: 'absolute',
  top: '50%',
  left: '50%',
  transform: 'translate(-50%, -50%)',
  width: 400,
  bgcolor: 'background.paper',
  border: '2px solid #000',
  boxShadow: 24,
  p: 4,
};

export default function BasicModal() {
  const [open, setOpen] = React.useState(false);
  const handleOpen = () => setOpen(true);
  const handleClose = () => setOpen(false);

return (
<div>
  <Button onClick={handleOpen}>Open modal box</Button>
  <Modal
    open={open}
    onClose={handleClose}
    aria-labelledby="modal-modal-title"
    aria-describedby="modal-modal-description"
  >
    <Box sx={style}>
      <Typography id="modal-modal-title" variant="h6" component="h2">
        Text in modal box
      </Typography>
      <Typography id="modal-modal-description" sx={{ mt: 2 }}>
        Duis mollis, est non commodo luctus, nisi erat portitor ligula.
      </Typography>
    </Box>
  </Modal>
</div>
); }

Answer 1

You can create a more generic component for the modal that accepts props to customize the content of each car
Create a new component named CarModal that accepts carImage, carTitle, and carDescription as props.

Now you can use this component multiple times inside the Cars component (the one where you want to show the cars) to create separate modals for each car, you just need to pass the appropriate props

// 导入 ...

const style = {
  // ...
};

function CarModal({ carImage, carTitle, carDescription }) {
  const [open, setOpen] = React.useState(false);
  const handleOpen = () => setOpen(true);
  const handleClose = () => setOpen(false);

  return (
    <div>
      <Button onClick={handleOpen}>打开模态框</Button>
      <Modal
        open={open}
        onClose={handleClose}
        aria-labelledby="modal-modal-title"
        aria-describedby="modal-modal-description"
      >
        <Box sx={style}>
          <Typography id="modal-modal-title" variant="h6" component="h2">
            {carTitle}
          </Typography>
          <Typography id="modal-modal-description" sx={{ mt: 2 }}>
            {carDescription}
          </Typography>
          <img src={carImage} alt={carTitle} />
        </Box>
      </Modal>
    </div>
  );
}

export default function Cars() {

  // 导入 carModal
  // ...

  return (
    <div>
      <CarModal
        carImage={Pagani}
        carTitle="Pagani汽车"
        carDescription="这是Pagani汽车的描述。"
      />
      <CarModal
        carImage={Pagani1}
        carTitle="另一辆Pagani汽车"
        carDescription="这是另一辆Pagani汽车的描述。"
      />
      // ...
    </div>
  );
}