Reactjs Render component dynamically based on a JSON config

Question

I have a following config as JSON

var componentConfig = {
content: { type: "ContentContent", data: "content"},
new_content: { type: "ContentFormContent", data: "content"}
}

In react rendercomponent, is it possible to pass the component name dynamically to react render.

for e.g in this rendercomponent instead of putting the ContentFormContent directly is it possible to pass the data from json config and i can loop or something.

React.renderComponent(<ContentFormContent data={[componentConfig.new_content.data]} />, body);

SO i will have a list of pages in json config and based on the selection of particular nav i will render the component based on its 'type' from the json file

Answer 1

The JSX

<ContentFormContent data={[componentConfig.new_content.data]} />

simply compiles to

ContentFormContent({data: [componentConfig.new_content.data]})

so you can make that function call however you like. In this case, it's probably most convenient to make a list of all possible components and do something like

var allComponents = {
    ContentContent: ContentContent,
    ContentFormContent: ContentFormContent
};

// (later...)
React.renderComponent(allComponents[component.type]({data: component.data}), body);

if component is an element from your example array.

Answer 2

React.renderComponent() has been deprecated, to use React.render() https://facebook.github.io/react/blog/2014/10/28/react-v0.12.html#deprecations

You may do something like:

var loadReactModule = function ($root, type, data) {
    var ContentContent= React.createClass({
        render: function () {
            return (
                <input type="text" placeholder="My Module-Input"/>
            );
        }
    });

    var ContentFormContent= React.createClass({
        render: function () {
            return (
                <form></form>
            );
        }
    });

    var allComponents = {
         ContentContent: ContentContent,
         ContentFormContent: ContentFormContent
    };

    if (type in allComponents) {

        $root.each(function (index, rootElement) {
            React.render(React.createElement(allComponents[type]), {data:data}, rootElement);
        });
    }
};