javascript - React / JSX Dynamic Component Name -

i trying dynamically render components based on type.

for example:

var type = "example"; var componentname = type + "component"; return <componentname />;  // returns <examplecomponent />  instead of <examplecomponent /> 

i tried solution proposed here react/jsx dynamic component names

that gave me error when compiling (using browserify gulp). expected xml using array syntax.

i solve creating method every component:

newexamplecomponent() {     return <examplecomponent />; }  newcomponent(type) {     return this["new" + type + "component"](); } 

but mean new method every component create. there must more elegant solution problem.

i open suggestions.

<mycomponent /> compiles react.createelement(mycomponent, {}), expects string (html tag) or function (reactclass) first parameter.

you store component class in variable name starts uppercase letter. see html tags vs react components.

var mycomponent = components[type + "component"]; return <mycomponent />; 

compiles to

var mycomponent = components[type + "component"]; return react.createelement(mycomponent, {});