Quiero iterar a través de imageUrl y mantener cada elemento dentro de la etiqueta li. Estoy obteniendo solo un elemento basado en alguna condición, en la matriz, entonces quiero iterar a través de todas las imágenes de mi matriz
const productsArr = [ { id: "p1", title: "Colors", price: 100, imageUrl: { imageUrl1: "img/Album%201.png", imageUrl2: "img/Album%202.png", imageUrl3: "img/Album%203.png", imageUrl4: "img/Album%204.png", }, }, { id: "p2", title: "Black and white Colors", price: 50, imageUrl: { imageUrl4: "img/Album%205.png", imageUrl1: "img/Album%206.png", imageUrl2: "img/Album%207.png", imageUrl3: "img/Album%208.png", }, },]código para iterar a través de la matriz. Creo que no debería usar el mapa aquí, pero no pude encontrar la solución.
console.log(product); const productImage= product[0].imageUrl.map(element => { return <li>{<img src={element} alt={product[0].title}/>}</li> });simplemente itere a través de la matriz usando métodos de matriz y llame a los objetos anidados usando la notación de puntos
por ejemplo :
productsArr.map(x =>{ x.imageUrl.imageUrl1)Puede recorrer los productsArr Arr y luego usar Object.values para crear una matriz de valores del objeto imageUrl e iterarlo a través de él para representar li con la imagen.
productsArr.map((item)=>{ return Object.values(item.imageUrl).map((imgUrl)=> <li><img src={imgUrl} alt={item.title}/></li>) })Prueba esto :
class TodoApp extends React.Component { constructor(props) { super(props) this.productsArr = [ { id: "p1", title: "Colors", price: 100, imageUrl: { imageUrl1: "img/Album%201.png", imageUrl2: "img/Album%202.png", imageUrl3: "img/Album%203.png", imageUrl4: "img/Album%204.png", } }, { id: "p2", title: "Black and white Colors", price: 50, imageUrl: { imageUrl4: "img/Album%205.png", imageUrl1: "img/Album%206.png", imageUrl2: "img/Album%207.png", imageUrl3: "img/Album%208.png", } }] } render() { return ( <div> {this.productsArr.map((obj) => { return Object.keys(obj.imageUrl).map((item) => ( <li>{ obj.imageUrl[item] }</li> )); })} </div> ) } } ReactDOM.render(<TodoApp />, document.querySelector("#app")) #app { padding: 20px; } li { margin: 8px 0; } <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="app"></div>