How to render variable components in React.js

Question

Can someone help me render react components with variable names? For example, I have a component that imports 3 other components and I want to loop through the array of components and render them. Very rough pseudocode:

import component1 from '...';
import component2 from '...';
import component3 from '...';

const component_list = ['component1', 'component2', 'component3']

renderComponents() {
    return this.component_list.map((component) {
      <div>
        <{component} />
      </div>
    });
}

I was going to say your already their expert for the curly braces. Gj — DirtyRedz
– DirtyRedz, Commented Dec 27, 2016 at 17:16

Ashley 'CptLemming' Wilson · Accepted Answer · 2016-12-27 17:12:25Z

2

Update the list of components with the components classes (rather than strings) and note that custom components must be capitalised:

import component1 from '...';
import component2 from '...';
import component3 from '...';

const component_list = [component1, component2, component3];

renderComponents() {
    return this.component_list.map((Component) => {
      <div>
        <Component />
      </div>
    });
}

answered Dec 27, 2016 at 17:12

Ashley 'CptLemming' Wilson

9,6222 gold badges35 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Andrés Andrade · Accepted Answer · 2016-12-27 17:10:08Z

0

import component1 from '...';
import component2 from '...';
import component3 from '...';

const component_list = [component1, component2, component3]

renderComponents() {
    return component_list.map((component) => {
      <div>
        <component />
      </div>
    });
}

answered Dec 27, 2016 at 17:10

Andrés Andrade

2,2132 gold badges20 silver badges23 bronze badges

Collectives™ on Stack Overflow

How to render variable components in React.js

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related