React : How to call component in Array.map?

Question

i'm using react-toolbox and tabs.

i would like to make an object like:

var Tabs = [
        {
            value: 0,
            label: 'First Tab',
            componentName : "MyAwesomeComponent"
        },
        {
            value: 1,
            label: 'Second Tab',
            componentName : "MyOtherAwesomeComponent"
        }
    ]

and then, in render's return function

<Tabs index={this.state.tabs.index} onChange={this.tabs.handleChange}>
    {this.Tabs.map((item,index) => (
        <Tab label={item.label}>
              **** Here, i want to call {item.componentName} component. ***
        </Tab>
     ))}
</Tabs>

is this possible to call component by name?

Thanks a lot.

https://stackoverflow.com/questions/30172433/create-an-instance-of-a-react-class-from-a-string — matiit, Nov 14 '17 at 10:21

score 1 · Answer 1 · answered Nov 14 '17 at 10:23

You could use something like:

import MyAwesomeComponent from 'path/to/MyAwesomeComponent'
import MyOtherAwesomeComponent from 'path/to/MyOtherAwesomeComponent'

const myComponents = {
  'MyAwesomeComponent': MyAwesomeComponent,
  'MyOtherAwesomeComponent': MyOtherAwesomeComponent,
}

<Tabs index={this.state.tabs.index} onChange={this.tabs.handleChange}>
    {this.Tabs.map((item,index) => {
      const Component = myComponents[item.componentName]

      return (
        <Tab label={item.label}>
          <Component value={item.value} label={item.label} />
        </Tab>
      )
    })}
</Tabs>

React : How to call component in Array.map?

1 Answers1