forEach over es6 Map in JSX
<p>I had a javascript array that was rendering components using <code>array.map</code>. I switched this array to an es6 <code>Map</code> in order to be able to use key-value pairs to find items more easily, and switched from a <code>.map</code> to a <code>forEach</code> over the Map. Inside the <code>forEach</code> I call a render method that returns a React component, but it isn't being rendered. How do I render a component inside the <code>forEach</code>?</p>
<pre><code>&lt;div className='gallery__items'&gt;
    {resultsByGuid.forEach((result, index) =&gt; {
        key++;
        this.renderGalleryItem(result, key);
    })} 
&lt;/div&gt;
</code></pre>
<p>Here is the renderGalleryItem method:</p>
<pre><code>renderGalleryItem = (item, index) =&gt; {
    const { gridItemSelected, itemThumbnailRequested } = this.props;
    return (
        &lt;GalleryItem
            key={index}
            item={item}
            onClick={gridItemSelected}
            fetchThumbnailFunc={itemThumbnailRequested}
        /&gt;
    );
};
</code></pre>
<p>I understand that forEach doesn't return anything but does that mean I can't render inside it?</p>