title: React loop through map and display components
body: <p>So I have a unique situation,</p>
  
  <p>in my States I don't have a regular list that I can do map and then in each iteration to display a component, for example:</p>
  
  <pre><code>list.map(shape =&gt; &lt;Shape {...shape} /&gt;)
  </code></pre>
  
  <p>But I have an <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map" rel="nofollow noreferrer">Hash Map</a>. I need to know the <code>key</code> and the <code>value</code> so I'll have the necessary information to display it as component.
  So I found a nice method: <code>entries()</code> that returns an <code>Iterator</code>, but how could I iterate it in a way that I could display new components inline?</p>
  
  <p>Something like that in pseudo code:</p>
  
  <p><code>myHashMap.entries().toList().map((key, value) =&gt; &lt;MyComponent myKey={key} myValue={value} /&gt;)</code></p>