J'ai un modal bootstrap de réaction dans lequel je mappe mes données, mais le problème est que lorsque je clique sur le modal, toutes les modalités affichent les mêmes données, c'est évidemment le dernier élément du tableau dans toutes les modalités. Je souhaite générer dynamiquement des modaux et afficher différentes données pour différents modaux.
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] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
L'état modal doit être conservé dans un tableau pour suivre des modalités spécifiques.
Nous pouvons le faire en transmettant l'index du tableau lors de l'ouverture et de la fermeture du 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}