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

The JSX

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.