In my project, I have a series of cards with specific data such as job numbers and titles. To provide more details about each job, I implemented a pop-up modal that can be accessed by clicking the "View Details" button on each card. The idea is to display additional information related to the specific card when the button is clicked.
However, one issue I encountered is that all the modals are rendered at once because there's only one toggleModal function assigned to each button. What I'm aiming for is to show details from the card you selected instead of displaying all pop-ups simultaneously.
I've been experimenting with different solutions as I'm relatively new to working with React.
The challenge lies in determining which card triggered the click event so that only that particular modal is displayed. Here is the code snippet:
function ActiveJobs() {
const [cards] = React.useState([
{
title: "Customer Name: Smith, James",
jobnum: "Job Number: 1829",
crewnum: "Crew: 0/2",
address: "1825 Olive Ave",
},
...
];
const [modal, setModal] = React.useState(false);
const toggleModal = () => {
setModal(!modal);
};
if (modal) {
document.body.classList.add("active-modal");
} else {
document.body.classList.remove("active-modal");
}
return (
<div>
<section>
<div className="container">
<h1>All Active Jobs</h1>
<div className="cards">
{cards.map((card, i) => (
<div key={i} className="card">
<h3>{card.title}</h3>
<p>{card.jobnum}</p>
<p>{card.crewnum}</p>
<p>{card.address}</p>
<button className="cardbtn" onClick={toggleModal}>
View Details
</button>
<button className="cardbtn">Assign Crew</button>
{modal && (
<div className="modal">
<div onClick={toggleModal} className="overlay"></div>
<div className="modal-content">
<h2>Job Details</h2>
<p>{card.title}</p>
<p>{card.jobnum}</p>
<p>{card.crewnum}</p>
<p>{card.address}</p>
<button className="close-modal" onClick={toggleModal}>
CLOSE
</button>
</div>
</div>
)}
</div>
))}
</div>
</div>
</section>
</div>
);
}
...
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.development.js"></script>