I want to iterate through imageUrl and keep each element inside li tag. I'm fetching only one element based on some condition, in the array then I want to iterate through all the images my array
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",
},
},]
code to iterate through the array. I think I should not use map here but I could not come up with the solution.
console.log(product);
const productImage= product[0].imageUrl.map(element => {
return <li>{<img src={element} alt={product[0].title}/>}</li>
});
just iterate through array using array methods and call the nested objects using dot natation
for example :
productsArr.map(x =>{
x.imageUrl.imageUrl1)
You can loop through the productsArr and then use Object.values to create an array of values from imageUrl object and iterate it through it to render li with image.
productsArr.map((item)=>{
return Object.values(item.imageUrl).map((imgUrl)=> <li><img src={imgUrl} alt={item.title}/></li>)
})
Try this :
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>