Dynamic rendering of the response component in action 0.12

Question

I asked this question earlier , but with React 0.12 and the JSX changes it brought, I am now looking for another way to implement this function.

Here is the code that works in React 0.11:

return React.createClass({ render: function() { var Tag = React.DOM[this.props.element]; return ( <Tag className='text'> {this.props.value} </Tag> ); } }); 

I am creating a component that displays different DOM elements based on the profile passed in the called "element". this.props.element will have a value such as "p", "h1" or "h2", etc. Although this technically works, I see a warning message in the console:

 Warning: Do not pass React.DOM.p to JSX or createFactory. Use the string "p" instead. Warning: Do not pass React.DOM.h2 to JSX or createFactory. Use the string "h2" instead. 

It takes some direction to help interpret this warning, and I cannot find good documentation on how to do something like this.

Answer 1

A super simple answer to this question (+1 for React 0.12 makes things easier!), But all that had to be done was to remove the React.DOM [] part of the variable definition by passing a string literal:

 return React.createClass({ render: function() { var Tag = this.props.element; return ( <Tag className='text'> {this.props.value} </Tag> ); } }); 

Works great; without any console warnings!