How to iterate through nested object which is inside an array in react.js ?

Yogesh Kumar
02-May-2022
0

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>