title: React mapping multiple arrays
body: <p>Sorry for any confusion. To put simply I want to make several titles with unordered lists.</p>
  
  <pre><code>&lt;h3&gt;level_3 key title&lt;/h3&gt;
  &lt;ul&gt;
    &lt;li&gt;level_4 value&lt;/li&gt;
    &lt;li&gt;level_4 value&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;h3&gt; another level_3 key title&lt;/h3&gt;
  &lt;ul&gt;
    &lt;li&gt;level_4 value&lt;/li&gt;
    &lt;li&gt;level_4 value&lt;/li&gt;
  &lt;/ul&gt; 
  </code></pre>
  
  <p>Difficult to phrase the problem into a question. Essentially having a really hard time trying to parse through some JSON and display the data correctly. What I would like to do is display <code>level_3.x</code> <em>below</em> as a top level list item and the nested <code>level_4.x</code> as nested list items. To be clear using React</p>
  
  <p>Example:</p>
  
  <ul>
  <li>KEY from <code>level_3.1</code>
  
  <ul>
  <li>String from <code>level_4.1</code></li>
  <li>String from <code>level_4.2</code></li>
  </ul></li>
  </ul>
  
  <p><strong>Repeat for every <code>level_3.x</code> object</strong></p>
  
  <p><strong>Example Data</strong></p>
  
  <pre><code>"level_1":{
    "level_2.1":{
      "level_3.1":{
       "level_4.1":["string","string","string"],
       "level_4.2":["string","string","string"]
      }
      "level_3.2":{
       "level_4.1":["string","string","string"],
       "level_4.2":["string","string","string"]
      }
    }
    "level_2.2":{
       "level_3.1":{
         ... Same as above
      }
       "level_3.2":{
         ... Same as above
      }
    }
  }
  </code></pre>
  
  <p>What I have done since you can only map an array, from my understanding, is try and go through <code>level_3.x</code> and push those to an Array. I can map over that and display the items as expected. </p>
  
  <p><strong>Parent Component</strong></p>
  
  <pre><code>render(){
    return( &lt;Child heading="A" data={resource.data} /&gt; )
  }
  </code></pre>
  
  <p><strong>Child Component</strong></p>
  
  <pre><code>render(){
    let groupObj;
    let groupArray;
    let subListItems;
  
    if('value' in this.props.data){
      var i;
      for(i = 0; i &lt; Object.keys(groupObj).length; i++){
        groupArray.push(Object.keys(groupObj)[i] + "," + Object.values(groupObj)[i]) 
  // Have removed the Object.values because I was trying to make everything flat and pull out the first item. Leaving it in because that was my original direction in the case it was actually the right way to go
      }
    }
    listItems = groupArray.map((item, index)=&gt;(&lt;li key={index}&gt;{item}&lt;/li&gt;));
  
    return({listItems})
  }
  </code></pre>
  
  <p>Thus far I can produce:</p>
  
  <ul>
  <li><code>level_3.1</code></li>
  <li><code>level_3.2</code></li>
  </ul>
  
  <p><code>console log &gt; [level_3.1,level_3.2]</code></p>
  
  <p>Which is great, and halfway there. Now where things break down is I can't seem to figure out how to get the <code>level_4.x</code> elements to render. </p>
  
  <p>I tried writing another map function inside the previous:</p>
  
  <pre><code>listItems = groupArray.map((item, index) =&gt; (
     &lt;li key={index}&gt;
       {item}
       &lt;ul&gt;
         {subListItems = groupObj.item.map((subItem, index) =&gt; ( 
           &lt;li key={index+1}&gt;{subItem}&lt;/li&gt;
         ))};
       &lt;/ul&gt;
     &lt;/li&gt;
   ));
  </code></pre>
  
  <p>This returns a map of undefined error, however if <code>item</code> is replaced with a key it'll work. <code>groupObj.level_4.1.map()</code> That will return a <code>level_4.1</code> values:</p>
  
  <ul>
  <li>level_3.1
  
  <ul>
  <li>level_4.1 value</li>
  <li>level_4.1 value &lt;&lt; unable to map level_4.2 and using <code>item</code> from the parent map function will return undefined</li>
  </ul></li>
  </ul>
  
  <p>So either doing this completely wrong, or missing a way to pass in a dynamic value into that <code>groupObj.[needs to be dynamic based on parent].map()</code></p>
  
  <p><em>Note, do know that using <code>index</code> as a key value is an anti-pattern just have that in for sake of getting this to work.</em></p>
  
  <p><strong>Update</strong></p>
  
  <p>Feel like this is 90% there but having one last issue. Took both answers into consideration and the easiest for me to implement and understand what I'm typing at this time is the following:</p>
  
  <pre><code>render(){
  
    let listItems;
    let name = this.props.heading
  
    if('level_2' in this.props.data){
  
      let data = this.props.data.level_2[name];
      console.log('ok we can get to work', data); // &lt;&lt;&lt; Good
  
      listItems = Object.keys(data).map((propKey) =&gt; (
        &lt;ul key={propKey}&gt;
         {propKey} // &lt;&lt;&lt; Good
         {console.log('PROP KEY', propKey)} // &lt;&lt;&lt; Good
           {data[propKey].map((childPropKey) =&gt;{
             &lt;li key={childPropKey}&gt;
               {childPropKey} // &lt;&lt;&lt;&lt;&lt;&lt; PROBLEM, This returns nothing in the DOM
               {console.log(childPropKey)} // &lt;&lt;&lt; Good
             &lt;/li&gt;
           })}
       &lt;/ul&gt;
     ));
  
  return(&lt;div&gt;{listItems}&lt;/div&gt;)
  }
  </code></pre>
  
  <p>So I'm able to <code>console.log(childPropKey)</code> and return expected results. But just trying to return <code>{childPropKey}</code> nothing gets returned</p>
  
  <p><strong>Working ES5</strong></p>
  
  <pre><code>listItems = Object.keys(data).map(function(propKey){
      return &lt;ul key={propKey}&gt;
        {propKey}
          {data[propKey].map(function(childPropKey){
            return &lt;li key={childPropKey}&gt;
              {childPropKey}
            &lt;/li&gt;
          })}
      &lt;/ul&gt;
    });
  </code></pre>
  
  <p><strong>Working ES6</strong></p>
  
  <pre><code>listItems = Object.keys(data).map((propKey) =&gt; (
    &lt;ul key={propKey}&gt;
      {propKey}
      {data[propKey].map((childPropKey) =&gt;(
        &lt;li key={childPropKey}&gt;
          {childPropKey}                 
        &lt;/li&gt;
       ))}
    &lt;/ul&gt;
  ));
  </code></pre>