Rendering Multiple React Components with .map
<p>This may be a complete noob question, but I am having trouble figuring this out.  I have a React component, and inside its render method, I want to render some dynamically passed in components (through props).  </p>

<p>Here's my return from the render method (ES6, transpiled with Babel)</p>

<pre><code>return (
    &lt;div className={openState}&gt;
    /* Shortened for brevity*/
    {this.props.facets.map(function(f) {
        var CompName = facetMap[f.type]
        return &lt;CompName key={f.id} /&gt;
    })}
    /* Shortened for brevity*/
    &lt;/div&gt;
)
</code></pre>

<p><code>facetMap</code> is simply a map to match up a string to the "type" passed in.  I can't seem to get the components to actually render on the page.  </p>

<p>I had the result of the .map() method stored in a var, and then logged that to the console, and it showed an array of components.  However <code>{facetComponents}</code> in the render method had the same results. </p>

<p><strong>EDIT, for those interested in the solution</strong></p>

<p>Because I genuinely could not find an answer anywhere, here's my completed solution, thanks to @Mathletics</p>

<pre><code>//Components imported using ES6 modules
import OCFacetText from "./oc-facet-text"
// Etc... 

//Later on, in my render method:
let facetMap = {
    "text":         OCFacetText,
    "number":       OCFacetNumber,
    "numberrange":  OCFacetNumberRange,
    "boolean":      OCFacetBoolean,
    "checkbox":     OCFacetCheckbox,
    // Etc, etc... 
}

let facetComps = facets.map(function(f) {
    var CompName = facetMap[f.type]
    return &lt;CompName key={f.id} /&gt;
})

//Finally, to render the components:
return (
    &lt;div className={openState}&gt;
    /* Shortened for brevity*/
        {facetComps}
    /* Shortened for brevity*/
    &lt;/div&gt;
)
</code></pre>