React Rendering Dynamic Inner Components

This example illustrates what i`m tryng to do. The goal is to have a dynamic component array and render it o the screen. I`m not being able to do the rendering part. import PropT

Solution 1:

In order to create dynamic component, you could just do the following

constructor() {
   super();
   this.components = [MyComponent1, MyComponent2];
}



render() {
      return (
      <divclassName='modal-contents'>
         {this.components.map(function (Component, i) {
            return <Componentkey= {i } />
         })}
      </div>
    )
  }

Solution 2:

There is a problem in this line:

return <{ component } key= { i } />

Component is an instance and this is JSX, when you put component in {} braces, it means you are taking it as a JavaScript variable. Write this line as:

return<Componentkey={i} />