I have a react bootstrap schema in which I map my data, but the problem is that when I click on the schema, all schemas show the same data, it is obviously the last item of the array in all schemas. I want to generate modals dynamically and display different data for different modals.
const content: { cardimg: string, Name: string, Post: string, Nation: string, About: string, mod:string }[] = [
{
"cardimg": `hello`,
"Name": "someone 1",
"Post": "Chairman & CEO",
"Nation": "India",
"About": "holds a degree of Executive MBA in Entrepreneurship from Rennes School of Business, France.",
"mod": "one"
},
{
"cardimg": `world`,
"Name": "someone 2",
"Post": "Deputy CEO",
"Nation": "India",
"About": "holds a degree in MBA Finance, someone 2 has more than 7 years of experience in Customer Engagement Services.",
"mod": "two"
},
const Leadershipcard = (prop: props) =\> {
const [modalShow, setModalShow] = useState(false)
return (
<>
{content.map((e) =>
<div className="card col-lg-6 p-0" style={{ "width": "18rem" } as React.CSSProperties}>
<img src={`Assets\About\team\${e.cardimg}.webp`} className="card-img-top" alt="..." />
<div className="card-body">
<h5 className="card-title">{e.Name}</h5>
<p className="card-text">{e.Post}</p>
<a href="/" className="d-block fs-4"><i className="fa-brands fa-linkedin-in"></i></a>
<button className="btn btn-outline-dark btn-dark rounded-0 text-bg-light mt-2 vi-more"
onClick={() => setModalShow(true)} data-bs-toggle="modal" data-bs-target={`/mod${e.mod}`}>View More</button>
** <Modals
show={modalShow}
onHide={() => setModalShow(false)}
Img={e.cardimg}
Name={e.Name}
Post={e.Post}
Nation={e.Nation}
About={e.About}
mod={e.mod}
/>**
</div>
</div>
)}
</>
)
}
export default Leadershipcard
[Modal component that I used (Bold text above)](https://i.stack.imgur.com/Cg01P.png)
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Modal state must be maintained in an array to track specific modalities.
We can do this by passing the array index when opening and closing the modal.
import React, { useEffect, useState } from "react"; import { Button, Modal } from "react-bootstrap"; const Modals = ({ show, onHide, about, name }) => { return (
{name}
{about}
);
};
const content = [
{
cardimg: `hello`,
Name: "someone 1",
Post: "Chairman & CEO",
Nation: "India",
About:
"Holds a degree of Executive MBA in Entrepreneurship from Rennes School of Business, France.",
mod: "one"
},
{
cardimg: `world`,
Name: "someone 2",
Post: "Deputy CEO",
Nation: "India",
About:
"Holds a degree in MBA Finance, someone 2 has more than 7 years of experience in Customer Engagement Services.",
mod: "two"
}
];
const LeadershipCard = (prop) => {
const [modalShow, setModalShow] = useState([]);
const handShow = (index) => {
const modalStateClone = [...modalShow];
modalStateClone[index] = true;
setModalShow(modalStateClone);
};
const handleClose = (index) => {
const modalStateClone = [...modalShow];
modalStateClone[index] = false;
setModalShow(modalStateClone);
};
useEffect(() => {
if (content?.length > 0) {
const contentArr = content.map((c) => {
return false;
});
console.log(contentArr);
setModalShow(contentArr);
}
}, []);
return (
{content.map((e, index) => (
handleClose(index)}
img={e.cardimg}
name={e.Name}
post={e.Post}
nation={e.Nation}
about={e.About}
mod={e.mod}
/>
))}
>
);
};
export default LeadershipCard;{e.Name}
{e.Post}