title: Most efficient way to render object of lists, containing objects
body: <p>Pretty new to React, currently trying to render out the below object which comes as a prop. It's an object containing lists, containing objects.</p>
  <p>What's the most efficient way to map over it, and return the below html for a component?</p>
  <p>I keep running in to trouble using <code>Object.entries()</code></p>
  <pre><code>prop = {     
      list1 = [
          { 
              id: 1,
              value: &quot;some value 1&quot;
          }, 
          { 
              id: 2,
              value: &quot;some value 2&quot;
          }
      ], 
      list2 = [
          { 
              id: 3,
              value: &quot;some value 3&quot;
          }, 
          { id: 4,
              value: &quot;some value 4&quot;
          }
      ]
  }
  </code></pre>
  <p>desired html:</p>
  <pre><code>&lt;div&gt;
    &lt;div&gt;
      &lt;h1&gt;List1&lt;/h1&gt;
      &lt;ul&gt;
        &lt;li key={id}&gt;
          some value 1 
        &lt;/li&gt;
        &lt;li key={id}&gt;
          some value 2
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;h1&gt;List2&lt;/h1&gt;
      &lt;ul&gt;
        &lt;li key={id}&gt;
          some value 3 
        &lt;/li&gt;
        &lt;li key={id}&gt;
          some value 4
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>