Dynamically Rendering a React component

Question

In React JSX it does not appear to be possible to do something like this:

render: function() {    return (      <{this.props.component.slug} className='text'>        {this.props.component.value}      </{this.props.component.slug}>    );  }

I get a parse error: Unexpected token {. Is this not something React can handle?

I'm designing this component so that under the hood, the values stored in this.props.component.slug will contain valid HTML elements (h1, p, etc.). Is there any way to make this work?

Answer 1

You should not put component slug in curly braces:

var Hello = React.createClass({     render: function() {         return <this.props.component.slug className='text'>             {this.props.component.value}         </this.props.component.slug>;     } });  React.renderComponent(<Hello component={{slug:React.DOM.div, value:'This is my header'}} />, document.body); 

Here is a working fiddle: http://jsfiddle.net/kb3gN/6668/

Also, you can find JSX Compiler helpful for debugging these kind of errors: http://facebook.github.io/react/jsx-compiler.html