REACT: Map over nested array of objects

Question

I am trying to map over array of objects which each array contains another nested array of objects. However, the map does not work on the nested array. How do i map over the

Answer 1

This is a working example.

const dataItems = [{
    title: "title1",
    content: [{
        imageUrl: "http://placehold.it/300x300",
        title: "Campaigns",
        description: "Short description explaining the use of this design in a single sentence."
      },
      {
        imageUrl: "http://placehold.it/300x300",
        title: "Events",
        description: "Short description explaining the use of this design in a single sentence."
      },
      {
        imageUrl: "http://placehold.it/300x300",
        title: "General",
        description: "Short description explaining the use of this design in a single sentence."
      }
    ]
  },
  {
    title: "title2",
    content: [{
        imageUrl: "http://placehold.it/300x300",
        title: "Video Template A",
        description: "Short description explaining the use of this design in a single sentence."
      },
      {
        imageUrl: "http://placehold.it/300x300",
        title: "Video Template A",
        description: "Short description explaining the use of this design in a single sentence."
      }
    ]
  }
];

class App extends React.Component {
  render() {
    return 
 
    {
      dataItems.map((item, index) => {
        return ( 

            
{item.title}
            { item.content.map((c, i) => 

            
{c.title}
            
{c.description}
            
)}
          
        )
      })
    }
    
  }
}

ReactDOM.render( < App / > , document.getElementById('root'));