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 contents of the nested array while keeping all the content under the same title of the parent object?

Fiddle: https://jsfiddle.net/69z2wepo/249197/

The data structure looks like:

[

  {

    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."

      }

    ]

  }

];

The map looks like

{dataItems.map((item, index) => {

  return (

    <h1>{item.title}</h1>

    // for each item, loop over the content array objects

    <img src={item.content.imageUrl} />

    <h3>{item.content.title}</h3>

    <h3>{item.content.description}</h3>

    <hr />

  );

})}