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 key -> Component which allows me to create a list of my components. However I have not found a way to render this list.

Example.:

input: [componentA, componentB, componentC]



output:

<ComponentA />

<ComponentB />

<ComponentC />

This is what I got so far, however I'm not sure how to render the list of components:

function renderElements(keys) {

  const components = {

    componentA: ComponentA,

    componentB: ComponentB,

    componentC: ComponentC,

  };



  const componentsToRender = keys.map(key => components[key]);



  return (

    <div>

      {componentsToRender}

    </div>

  );

}