Dynamically Rendering a React Component in React 0.12

Question

I asked this question previously, but with React 0.12 and the JSX changes it brought, I'm now seeking another way to implement this feature.

Here's 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'm making a component that renders different DOM elements based on the prop passed in called "element". this.props.element will be a value such as "p", "h1" or "h2" etc. While this technically works, I'm seeing 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.

Need some direction to help interpreting that warning and I can't find good documentation for how to do something like this.

Answer 1

Super simple answer to this (+1 for React 0.12 making things simpler!) but all that needed to be done is remove the React.DOM[] part of the variable definition, passing the string literal:

return React.createClass({
    render: function() {

      var Tag = this.props.element;

      return (
        <Tag className='text'>
          {this.props.value}
        </Tag>
      );
    }
});

Works beautifully; without any console warnings!