React: Map Over Nested Array Of Objects

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 conten

Solution 1:

Since each element has a content array, you must map over content as well.

Example

{dataItems.map((item, index) => (
  <divkey={index}><h1>{item.title}</h1>
    {item.content.map((c, i) => (
      <divkey={i}><imgsrc={c.imageUrl} /><h3>{c.title}</h3><h3>{c.description}</h3><hr /></div>
    ))}
  </div>
))}

Solution 2:

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."
      }
    ]
  }
];

classAppextendsReact.Component {
  render() {
    return<div> 
    {
      dataItems.map((item, index) => {
        return ( <div><h1>{item.title}</h1>
            { item.content.map((c, i) => <div><h3>{c.title}</h3><h3>{c.description}</h3></div>)}
          </div>
        )
      })
    }
    </div>
  }
}

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

<divid="root"></div><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>