title: Injecting Component name into tag in React
body: <p>This has been asked before, but the solutions don't seem to be working for me... maybe because I am conditionally rendering?  The idea is that I have choices for the user to click on, and then the appropriate component is rendered onClick.  So I want to inject the name of the component into the tag conditionally when the user makes a choice.  Here is a fairly minimal example:</p>
  
  <pre><code>import React, { Component } from 'react';
  import PropTypes from 'prop-types';
  import { connect } from 'react-redux';
  import RaisedButton from 'material-ui/RaisedButton';
  import { setData } from '../../actions/data';
  import * as mathUtils from '../../mathUtils';
  
  class MyParentClass extends Component {
    constructor(props) {
      super(props);
      this.handleChoice = this.handleChoice.bind(this);
    }
    handleChoice({ topic, user }) {
      const id = `${Date.now()}-${mathUtils.uuidv4()}`;
      this.props.setData({ topic, id, user });
    }
    render() {
      const { id, currentUser } = this.props;
      const Topic = this.props.topic;
      return (
        id
          ? &lt;Topic /&gt;
          : &lt;RaisedButton
              role="button"
              primary={true}
              label="NumberOne"
              onClick={() =&gt; this.handleChoice({
                  topic: 'NumberOne',
                  user: currentUser
                })
              }
            /&gt;
            &lt;br /&gt;
            &lt;RaisedButton
              role="button"
              primary={true}
              label="NumberTwo"
              onClick={() =&gt; this.handleChoice({
                  topic: 'NumberTwo',
                  user: currentUser
                })
              }
            /&gt;
      );
    }
  }
  
  MyParentClass.propTypes = {
    id: PropTypes.string,
    topic: PropTypes.string,
    setData: PropTypes.func.isRequired,
    currentUser: PropTypes.object.isRequired
  };
  
  MyParentClass.defaultProps = {
    id: null,
    topic: null
  };
  
  export default connect(
    ({ session, data }) =&gt; ({
      currentUser: session.currentUser,
      id: data.id,
      topic: data.topic
    }),
    { setData }
  )(MyParentClass);
  </code></pre>
  
  <p>I get two different errors in the console for this code that seem to be at odds with each other.  The first is <code>Warning: &lt;NumberOne /&gt; is using uppercase HTML. Always use lowercase HTML tags in React.</code> and the second is <code>Warning: The tag &lt;NumberOne&gt; is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.</code></p>
  
  <p>I'm reasonably convinced I'm just not applying the correct logic to my application, but I'm not sure how else to accomplish the desired behavior.</p>