Изучаю реакт и делаю страницу, на которой отображаются все картинки из файла json, при нажатии на каждую отдельную картинку должно открываться модальное окно с каждой конкретной картинкой. У меня открываются все вместе, перекрывая друг друга. Как можно исправить это?
Вот мой код:
import React, { useEffect, useState } from "react";
import axios from "axios";
import Card from "react-bootstrap/Card";
import Image from 'react-bootstrap/Image';
import Modal from 'react-bootstrap/Modal';
export default function Portfolio() {
const [state, setState] = useState({ persons: [] });
const [show, setShow] = useState(false);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
useEffect(() => {
axios.get("http://localhost:3000/portfolio-data.json").then((res) => {
const persons = res.data;
setState({ persons });
});
}, [setState]);
return (
<div className="container">
<div className="portfolio-wrapper">
{state.persons.map((person) => (
<>
<Card
style={{ width: "18rem" }}
className="portfolio-card"
onClick={handleShow}
>
<Card.Img variant="top" src={person.src} className="card-pic" />
<Card.Body>
<Card.Title>{person.title}</Card.Title>
<Card.Text>{person.desc}</Card.Text>
</Card.Body>
</Card>
<Modal show={show} onHide={handleClose}>
<Modal.Header closeButton>
<Modal.Title>{person.title}</Modal.Title>
</Modal.Header>
<Modal.Body>
<Image src={person.src} fluid />
</Modal.Body>
</Modal>
</>
))}
</div>
</div>
);
}
show