React Dynamic Component Naming

Question

I'm new to React so please have mercy.

I've also read all of the threads on this, React / JSX Dynamic Component Name and React/JSX dynamic component names in particular. The solutions did not work.

I'm using a tab style interface where a user selects a tab and the appropriate content loads. A parent component stores the tab's content state, passes the corresponding props to the content child. This child then loads the correct content component (as its own child).

var TabbedContent = React.createClass({

loadMenu: function() {
    var menus=this.props.carDivState.vehicleDetailState;
    for (key in menus) {
        if (menus.hasOwnProperty(key)) {
            if (menus[key]) { 
                var Component='TabbedContent'+key;
                return <Component />;
            }         
        }
    }
},

render: function() {
    return (
        <div className="TabbedContent">
            <div className="contentWrapper">
                {this.loadMenu()}
            </div>
        </div>
    )
}

});

loadMenu loops through the props until it finds a true prop. It then returns that key (for instance "Overview") and creates a variable (e.g. Component='TabbledContentOverview').

However, my code returns an HTML tag <tabbedcontentoverview></tabbedcontentoverview>

Question

How do I get React to return the React component instead of an HTML tag? I appear to be using the correct capitalized naming conventions. I've read the Facebook docs. I just don't get it.

I'd find another way of doing it, dynamic like that seems like a recipe for disaster... Why not use props like ``? — elclanrs, Aug 12 '15 at 20:16
As I understand your solution, you would pass the key as a prop and then store all of the potential tabbed content in the same component? I worry that as the sections scale, I'll be left with one giant and unwieldy component. What am I missing or why am I wrong? Thank you for taking the time to reply! — D. Walsh, Aug 12 '15 at 20:33
That was my suggestion, but I guess it depends on how many alternatives you need. In any case, you can build dynamic components, after all, JSX is "just JavaScript"; there is a `displayName` property that you can use to create classes dynamically with `React.createClass` — elclanrs, Aug 12 '15 at 20:45

score 4 · Accepted Answer · answered Jan 12 '18 at 12:20

https://github.com/vasanthk/react-bits/blob/master/patterns/30.component-switch.md

import HomePage from './HomePage.jsx';
import AboutPage from './AboutPage.jsx';
import UserPage from './UserPage.jsx';
import FourOhFourPage from './FourOhFourPage.jsx';

const PAGES = {
  home: HomePage,
  about: AboutPage,
  user: UserPage
};

const Page = (props) => {
  const Handler = PAGES[props.page] || FourOhFourPage;

  return <Handler {...props} />
};

// The keys of the PAGES object can be used in the prop types to catch dev-time errors.
Page.propTypes = {
  page: PropTypes.oneOf(Object.keys(PAGES)).isRequired
};

lyosef · Answer 2 · 2015-08-13T20:17:52.693

1

You need to have a reference to an actual class in order to create an element from it (in JS or JSX).

Hold a map of keys to React classes (i.e tabbedChildren), and just create this element using the JS API:

var childComponent = tabbedChildren[key] 
return React.createElement(childComponent)

https://facebook.github.io/react/docs/top-level-api.html

edited Aug 13 '15 at 20:17

answered Aug 12 '15 at 22:27

lyosef

6,092
2
27
20

I tried to implement your solution (and per the FB docs), but I am getting a type error. I'm not familiar with bracket notation concatenating with a React component. I suspect that's where I'm going wrong. Here's a [fiddle](http://jsfiddle.net/o8yLv1tb/) – D. Walsh Aug 13 '15 at 16:40
I meant having a JS map of keys <=> components, and get the required component by key. I edited the answer to reflect it. – lyosef Aug 13 '15 at 20:20

score 1 · Answer 3 · answered Aug 12 '15 at 23:39

First, if you are using Bootstrap for your app, I'd suggest that you use react-bootstrap`s tab. If you are not, I would suggest that you at least take a look at the implementation of their TabPane and TabbedArea.

Here's an example of how it looks like in your app:

const tabbedAreaInstance = (
  <TabbedArea defaultActiveKey={2}>
    <TabPane eventKey={1} tab='Tab 1'>TabPane 1 content</TabPane>
    <TabPane eventKey={2} tab='Tab 2'>TabPane 2 content</TabPane>
    <TabPane eventKey={3} tab='Tab 3' disabled>TabPane 3 content</TabPane>
  </TabbedArea>
);

React.render(tabbedAreaInstance, mountNode);

Now, back to your question, if you want to create a component by name, just call React.createElement from inside your loadMenu:

loadMenu: function() {
    var menus=this.props.carDivState.vehicleDetailState;
    for (key in menus) {
        if (menus.hasOwnProperty(key)) {
            if (menus[key]) { 
                return React.createElement('TabbedContent'+key);
            }         
        }
    }
}

Thank you for the Bootstrap advice! I will be sure to check it out. I created a [fiddle](http://jsfiddle.net/hw0oyzod/3/) implementing (or at least attempting to implement) your answer. It returns an HTML element ``. Any idea where this is going wrong? — D. Walsh, Aug 13 '15 at 05:44

React Dynamic Component Naming

3 Answers3