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

Sophie Alpert · Accepted Answer · 2013-12-27 07:42:30Z

15

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.

answered Dec 27, 2013 at 7:42

Sophie Alpert

144k37 gold badges229 silver badges244 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

mrvol Over a year ago

Warning: Something is calling a React component directly. Use a factory or JSX instead. See: fb.me/react-legacyfactory

yadhu Over a year ago

React.renderComponent is now React.render.

Lei Niu · Accepted Answer · 2015-06-08 21:05:44Z

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

Collectives™ on Stack Overflow

Reactjs Render component dynamically based on a JSON config

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related