CODEWITHSUNDEEP
javascriptreactjs
V1n0d
V1n0d

Reputation: 217

Reactjs Render component dynamically based on a JSON config

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

Upvotes: 9

Views: 10144

Answers (2)

Lei Niu
Lei Niu

Reputation: 51

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

Upvotes: 3

Sophie Alpert
Sophie Alpert

Reputation: 143204

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.

Upvotes: 15

Related Questions