react: Unable to render component from name string

Simple fix: just use Child instead of 'Child' – you want to pass an actual reference to the JS variable:

http://jsfiddle.net/dhjxu5oL/1/

@af7 If that’s what you want then you need to provide the mapping yourself, there is nothing React can do for you here. React works with regular classes and classes are not magically registered with React.

import MyComponent1 from './MyComponent1.js';
import MyComponent2 from './MyComponent2.js';
import MyComponent3 from './MyComponent3.js';

const myComponentsList = [
  MyComponent1,
  MyComponent2,
  MyComponent3
];

const myComponentsListByName = {
  MyComponent1: MyComponent1,
  MyComponent2: MyComponent2,
  MyComponent3: MyComponent3
};

/* es6 syntax */
const myComponentsListByName = {
  MyComponent1,
  MyComponent2,
  MyComponent3
};

@spicyj I don’t think that’s what he is asking. I think he wants to be able to create a React element from a dynamically acquired name (string).

What he is looking for is:

React.createElement(ChildName, null)

instead of what he has (<ChildName />)

What @syranide said. Then in render you can do:

// Needs to start with a capital letter
var Type = myComponentsList[this.props.componentId];
...
<Type />

I came twice in a situation that I needed a dynamic use of the proper component.

A suggestion below:

The React team could create a helper function, for example: React.getComponentByName(name: string), that returns the component that has the same name as the input string:

import MyComponent from './MyComponent.js';
const myComponents = [];
myComponents[0] = React.getComponentByName(`MyComponent`);

In that way, we can easily implement the following use case of rendering the proper component based on props received:

import MyComponent1 from './MyComponent1.js';
import MyComponent2 from './MyComponent2.js';
import MyComponent3 from './MyComponent3.js';

const myComponentsList = [];

for (let i of [1, 2, 3]) {
    myComponentsList[i] = React.getComponentByName(`MyComponent${i}`);
}

Then, in JSX:

render()
{
    return (
            <div>

                <div>
                    Use the proper Component below, based on the incoming props:
                </div>

                    {
                       myComponentsList[this.props.componentId]
                    }

            </div>
    )
}

React.createElement(ChildName, null) and <ChildName /> are equivalent.

From @rmoskal said, I’ve been able to put something together. I’m also using react-rails but with a different setup you can find here if you’re on Rails as well it will allow you use import statements and use npm packages : Rails + Browserify + React + ES7

I created a selectr_option_templates file where I will put the different components I want to use as templates which looks like this :

class ProductColor extends React.Component {

    render() {
        return (
            <div className="product-color">
                <span style={{background: this.props.option.value}}></span> {this.props.option.name}
            </div>
        );
    }
}

ProductColor.propTypes = {
    option: React.PropTypes.object
}

module.exports = {
    "ProductColor": ProductColor
}

The important part then is to use module.exports to make the mapping happen.

Then in your parent module you can do :

import * as templates from 'components/selectr/selectr_option_templates';

var optionComponent = templates[this.props.optionComponent]

<optionComponent />

I pass “ProductColor” in my this.props.optionComponent This way I can get my class name from the props, previously set with react_component helper with react-rails. Obviously this will work however you get your string class name from.

This is the best solution I found so far, also for some reason eval(this.props.optionComponent) throws an error so I can’t use it.

As you probably know, it’s best practice not to use eval or look up globals on window by string name as it tends to make code hard to reason about, but you can use those patterns with React too:

var name = 'Component' + this.props.componentID;
var Component = window[name];  // or eval(name)
return <Component />;

The key is to use a capitalized variable name (Component) or else React will treat it as a built-in DOM element.

If you can live with having all your components in one module, then this works pretty well:

   import * as widgets from 'widgets';
   var Type = widgets[this.props.componentId];
   ...
   <Type />

Maybe you can do something like

var allMyComponents = {};

var Child = React.createClass(...);
allMyComponents['Child'] = Child;

// ...
var Component = allMyComponents[name];

which isn’t a large overhead but is more reasonable than using globals. React tries to be simple and get out of your way instead of adding a lot of magic – you can then build whatever you want on top, just as you can in JS without React.

@spicyj @jsfb Both of those suggestions arrive at the same outcome. Neither of them are supporting the ability to dynamically generate name strings which reference existing components.

I wanted to store some ID value in a component prop and then use the name string to render the component.

What I am looking for is something almost like eval() or running window[nameString]().

var NameString = 'Component' + this.props.componentID;
return <NameString />

Updated fiddle with easy testing: http://jsfiddle.net/q3zwtosw/