Bagaimana untuk menggunakan berbilang corak React-Bootstrap?

Question

Saya mempunyai mod react bootstrap di mana saya memetakan data saya, tetapi masalahnya ialah apabila saya mengklik pada modal, semua modaliti menunjukkan data yang sama, ia jelas merupakan item terakhir tatasusunan dalam semua modaliti. Saya mahu menjana modal secara dinamik dan memaparkan data yang berbeza untuk modal yang berbeza.

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

Keadaan modal mesti dikekalkan dalam tatasusunan untuk mengesan modaliti tertentu.

Kita boleh melakukan ini dengan melepasi indeks tatasusunan semasa membuka dan menutup 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;