score:8

Accepted answer

What worked for me:

render() {
  const components = [ComponentA, ComponentB, ComponentC] // references to components
  return (
    <div>
      {components.map((comp, i) => React.createElement(comp, { key: i })}
    </div>
  );
}

Had to use a reference to the component and had to use React.createElement due to problems with nested JSX (might be Typescript related).

score:0

For some reason using the map function as specified in the React documentation didn't work for me for any component/element that's not an li, I had to explicitly specify a return statement.

options = optionsArray.map(o => {
    // replace option with your component name
    return <option key={o.name} value={o.name}>{o.name}</option>
})

then I rendered the generated elements. You can do it inline too if you want.

<div>
    {options}
</div>

score:1

Try this. It should work. 

 render()
    {
      const input=["ComponentA", "ComponentB", "ComponentC"]

       return(
             <div>
               {
                  input.map((comp,i)=>){
                      return <{comp} key={i} />
                    }
                }
             </div>

        )
    }

Note: input= ["ComponentA", "ComponentB", "ComponentC"];Custom component name should be in Capital

score:1 

render() {
    return (
       <div>
          {componentsToRender.map((Component, key) => (<Component key={key}/>))}
       <div>
    );
  }

Related Query

More Query from same tag