Luchando con este problema con las respuestas anteriores que no utilizan la función de mapa / componentes funcionales. Cuando hago clic en mi Tarjeta, el modal solo muestra los datos del último Modal:
export const ModalCard = (props) => { const productData = props.data; const [modal, setModal] = React.useState(false); const toggle = () => setModal(!modal); return ( <Row> {productData.map((v, i) => ( <Col className="py-4 btn" key={i} xs={12} md={4} lg={2}> <div className="pb-4" onClick={toggle}> <div className="product_card_padding"> <div className="pt-4"> <span className="card_product_subtitle">{v.headline}</span> </div> </div> <Modal isOpen={modal} toggle={toggle} centered > <ModalBody className="product_modal" onClick={toggle}> <div className="row pt-3 bg_white"> <Col> <div> <span className="card_product_subtitle">{v.headline}</span> </div> </Col> </div> </ModalBody> </Modal> </div> </Col> ))} </Row> ); }De acuerdo con su código, se abrirán múltiples modales y verá el último modal.
Si tiene 10 productos, se abrirán 10 modales.
Mi sugerencia es que debe definir una función de map exterior modal global y debe definir una nueva variable de estado para representar el producto seleccionado que se representará en el modal.
selectedInd contiene el índice de datos que se representará en modal.
const [selectedInd, setSelectedInd] = React.useState(-1); Luego, la función de toggle se cambiaría para establecer -1 para ocultar modal.
const toggle = () => setSelectedInd(-1); Y mueve el map exterior modal.
Intente usar el siguiente patrón de código.
export const ModalCard = (props) => { const productData = props.data; const [selectedInd, setSelectedInd] = React.useState(-1); const toggle = () => setSelectedInd(-1); const modal = selectedInd >= 0 && (productData && productData.length > selectedInd); return ( <React.Fragment> <Row> {productData.map((v, i) => ( <Col className="py-4 btn" key={i} xs={12} md={4} lg={2}> <div className="pb-4" onClick={()=>setSelectedInd(i)}> <div className="product_card_padding"> <div className="pt-4"> <span className="card_product_subtitle">{v.headline}</span> </div> </div> </div> </Col> ))} </Row> {modal && <Modal isOpen={modal} toggle={toggle} centered> <ModalBody className="product_modal" onClick={toggle}> <div className="row pt-3 bg_white"> <Col> <div> <span className="card_product_subtitle">{productData[selectedInd].headline}</span> </div> </Col> </div> </ModalBody> </Modal>} </React.Fragment> ); }