0
180
VisualizaçõesCómo agregar datos dinámicamente a la grilla en React js
Quiero poder agregar imágenes a una cuadrícula en conjuntos de 3 pero en su lugar está creando 3 conjuntos de cada imagen Este es mi código
const data = [ { image: "https://d25u15mvjkult8.cloudfront.net/videos/7265406/images/500/dOlh05avp978ye6iGOid.jpg", id: 1, }, { image: "https://d25u15mvjkult8.cloudfront.net/videos/7265203/images/500/955tjRfCGzpQyNZM3Kiz.jpg", id: 2, }, { image: "https://d25u15mvjkult8.cloudfront.net/videos/7261533/images/500/PBHl35kwCbsoO27St6tP.jpg", id: 3, }, ]; {data.map((item, index) => { return ( <Col xl={12}> <Row> <Col xl={6}> <img src={item.image} alt="First slide" width={"100%"} height={600} /> </Col> <Col xl={6}> <img src={item.image} width={"100%"} height={300} /> <img src={item.image} width={"100%"} height={300} /> </Col> </Row> </Col> ); })} esta es mi salida 
Este es el resultado deseado
Y si hay más de 3 imágenes, debería crear automáticamente una fila de imágenes con una estructura similar.
·
Juan Pablo Isaza
1 Respostas
Responde à pergunta0
{data.map((item, index) => { return ( <Col xl={12}> <Row> {index % 2 === 0 && <Col xl={6}> <img src={item.image} alt="First slide" width={"100%"} height={600} /> </Col>} {index % 2 !== 0 && <Col xl={6}> <img src={item.image} alt="First slide" width={"100%"} height={600} /> </Col>} </Row> </Col> ); })} Básicamente, lo está haciendo de la manera correcta pero está repitiendo todos los elementos 3 veces sin condición, por lo que muestra cada imagen tres veces,
En la solución anterior, estoy recorriendo los datos y Col está tomando 6, por lo que se ajustaría de acuerdo con la condición. Compruebe también la capacidad de respuesta.
·
Juan Pablo Isaza
Relatório
Responde à pergunta