title: React - Render dynamic list of components
body: <p>I have a list of keys which represent a custom React component. Based on this list I want to render the appropriate component. I have a reference to each component so I can create a map of <code>key -&gt; Component</code> which allows me to create a list of my components. However I have not found a way to render this list.</p>
  
  <p>Example.:</p>
  
  <pre><code>input: ["componentA", "componentB", "componentC"]
  
  output:
  &lt;ComponentA /&gt;
  &lt;ComponentB /&gt;
  &lt;ComponentC /&gt;
  </code></pre>
  
  <p>This is what I got so far, however I'm not sure how to render the list of components:</p>
  
  <pre><code>function renderElements(keys) {
    const components = {
      componentA: ComponentA,
      componentB: ComponentB,
      componentC: ComponentC,
    };
  
    const componentsToRender = keys.map(key =&gt; components[key]);
  
    return (
      &lt;div&gt;
        {componentsToRender}
      &lt;/div&gt;
    );
  }
  </code></pre>