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\", d         


        

Answer 1

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);
        });
    }
};

Answer 2

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.