Comment utiliser plusieurs modèles React-Bootstrap ?

Question

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)

Answer 1

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}
      
        
          Close
        
      
    
  );
};

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) => (
        

          

            
{e.Name}
            
{e.Post}
            
              
            
             handShow(index)}
              data-bs-toggle="modal"
              data-bs-target={`/mod${e.mod}`}
            >
              View More
            
             handleClose(index)}
              img={e.cardimg}
              name={e.Name}
              post={e.Post}
              nation={e.Nation}
              about={e.About}
              mod={e.mod}
            />
          

        
      ))}
    >
  );
};

export default LeadershipCard;