여러 React-Bootstrap 패턴을 사용하는 방법은 무엇입니까?

Question

데이터를 매핑하는 반응 부트스트랩 모달이 있는데 문제는 모달을 클릭하면 모든 양식이 동일한 데이터를 표시하고 모든 양식에서 배열의 마지막 항목이 분명히 표시된다는 것입니다. 모달을 동적으로 생성하고 다른 모달에 대해 다른 데이터를 표시하고 싶습니다.

으아아아

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

Answer 1

특정 양식을 추적하려면 모달 상태를 배열로 유지해야 합니다.

모달을 열고 닫을 때 배열 인덱스를 전달하면 됩니다.

으아아아