Obtengo los ID de imagen para las fotos de la galería de reddit de esta manera:
// Check if post is a gallery and if yes, map through each image and get the id if (post.is_gallery) { const id = post.gallery_data.items.map((item) => item.media_id); console.log(id); } Quiero poner cada una de estas ID en un elemento <img /> y representarlas, pero la respuesta que obtengo de esa declaración es así:
¿Cómo puedo obtener cada una de esas ID de sus matrices y representarlas en múltiples elementos <img > ?
<img src={`https://i.redd.it/${id-goes-here}.jpg`} className="image" alt="Gallery Images" />Puede mapear sus datos y devolver una etiqueta img como esta:
const images = post.gallery_data.items.map((item) => <img src={`https://i.redd.it/${item.media_id}.jpg`} key={item.media_id} className="image" alt="Gallery Images"/>); entonces puedes poner tu variable de images en tu jsx, así:
return (<>{images}</>)También puedes poner el mapa directamente en tu renderizado jsx, así:
return (<>{post.gallery_data.items.map((item) => <img src={`https://i.redd.it/${item.media_id}.jpg`} key={item.media_id} className="image" alt="Gallery Images"/> }</>);