title: How to dynamically display an array of arrays in groups
body: <p>How to dynamically display an array of arrays. The nested array has multiple objects. I would like to display them in groups.</p>
  
  <pre><code>var obj = 
  [
     [
       { name: 'Text 1', title: 'Text 1 Title', category: 'Text 1' },
  
       { name: 'Text 2', title: 'Text 2 Title', category: 'Text 1' }
     ],
  
     [
       { name: 'Text 1', title: 'Text 1 Title', category: 'Text 2' },
  
       { name: 'Text 2', title: 'Text 2 Title', category: 'Text 2' }
     ],
  ]
  </code></pre>
  
  <p>My original solution works but it displays it all in one line</p>
  
  <pre><code>const list = obj.map(cat =&gt; cat.map(e =&gt; {  
     return (
        &lt;div className={e.category} key={`${e.title}-${e.name}`}&gt;
           &lt;h6&gt;{e.title}&lt;/h6&gt;
           &lt;p&gt;{e.name}&lt;/p&gt;
        &lt;/div&gt;
     )       
  }));    
  </code></pre>
  
  <p>e.g.</p>
  
  <pre><code>Name: Text 1
  Title: Text 1 Title
  Name: Text 2
  Title: Text 2 Title
  Name: Text 1
  Title: Text 1 Title
  Name: Text 2
  Title: Text 2 Title
  </code></pre>
  
  <p>I would like to display them like this e.g.</p>
  
  <pre><code>Text 1 Category
  Name: Text 1
  Title: Text 1 Title
  Name: Text 2
  Title: Text 2 Title
  
  Text 2 Category
  Name: Text 1
  Title: Text 1 Title
  Name: Text 2
  Title: Text 2 Title
  </code></pre>
  
  <p>I tried to create the category's in div and give them id and then render them but couldn't think of a solution to how to implement the category's in the right div</p>
  
  <pre><code>var objList = ["Text 1", "Text 2"];
  
  const sectionList = objList.map((e, index) =&gt; {
     return (
        &lt;div id={e} key={index}&gt;&lt;/div&gt;
     )
  })
  </code></pre>