React call Component dynamically from array of strings

Question

I have an array as such:

export const options = [
    {id: 1, name='ComponentOne'},
    {id: 2, name='ComponentTwo'},
]

Then I have my components:

export const ComponentOne = props => (<div>{this.props.content}</div>)
export const ComponentTwo = props => (<div>{this.props.content}</div>)

Then I have my view:

export class MyView extends React.Component{
    constructor(props){
        super(props);
        this.state = {};
    }
    render(){
        return(
            <div>
                {options.map( obj => <obj.name/> )
            </div>
        )
    }
}

I would like to dynamically render these components but have no idea how to.

What if you use the component itself instead of the name in options? {id: 1, name=ComponentOne}. Should it work? — Héctor Valls
– Héctor Valls, Commented Dec 26, 2017 at 11:55
do you know all the component names that could be in this array? If yes, why not use a switch statement? — Martin Shishkov
– Martin Shishkov, Commented Dec 26, 2017 at 12:05

Krasimir · Accepted Answer · 2017-12-26 12:28:08Z

1

Instead of keeping the name of the component class why not keep the class itself. Like so:

const options = [
    {id: 1, componentClass: ComponentOne},
    {id: 2, componentClass: ComponentTwo}
];

export class MyView extends React.Component{
    constructor(props){
        super(props);
        this.state = {};
    }
    render(){
        return(
            <div>
                {
                  options.map(obj => {
                    const Class = obj.componentClass;

                    return <Class />;
                  })
                }
            </div>
        )
    }
}

answered Dec 26, 2017 at 12:28

Krasimir

13.6k4 gold badges45 silver badges58 bronze badges

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

3 Comments

Shezan Kazi Over a year ago

How would I pass the props to <Class/>?

Shubham Khatri Over a year ago

What are the props that you which to pass

Shezan Kazi Over a year ago

for example the id of MyView Parent Component Okay thanks a lot. This worked.

Collectives™ on Stack Overflow

React call Component dynamically from array of strings

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related