React : How to call component in Array.map? [duplicate]

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.

stackoverflow.com/questions/30172433/…

matiit
– matiit

2017-11-14 10:21:29 +00:00
Commented Nov 14, 2017 at 10:21 — matiit
– matiit, Commented Nov 14, 2017 at 10:21

Hemerson Carlin · Accepted Answer · 2017-11-14 10:23:01Z

1

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>

answered Nov 14, 2017 at 10:23

Hemerson Carlin

7,4241 gold badge29 silver badges38 bronze badges

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

Collectives™ on Stack Overflow

React : How to call component in Array.map? [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related