title: React auto wrapping higher-order components inside of ul elements
body: <p>I have a higher-order component that I need to use both inside <code>&lt;ul&gt;</code> and non-list elements.  The <code>&lt;li&gt;</code>s are styled to add padding / dividers between them, etc.  I don't want to wrap the higher-order component in an <code>&lt;li&gt;</code>, as it's clickable and the click target would then be reduced due to the padding on the <code>&lt;li&gt;</code>.</p>
  
  <p>I figured I'd just pass in a prop to the component so that I could change it's base element type depending on where it was being used:</p>
  
  <pre><code>const Component = React.createClass({
    getDefaultProps() {
      return {
        elementType: 'li',
      };
    },
  
    render() {
      return (
        &lt;this.props.elementType onClick={ ... }&gt;
          { content }
        &lt;/this.props.elementType&gt;
      );
    },
  });
  </code></pre>
  
  <p>And it seems to be rendering the base element correctly.  However, when I use this inside a <code>&lt;ul&gt;</code>:</p>
  
  <pre><code>&lt;ul&gt;
    &lt;Component /&gt;
    &lt;Component /&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>React automatically wraps <code>Component</code> in a <code>&lt;li&gt;</code> (even though it's base element is already an <code>&lt;li&gt;</code>) which causes React to complain about nesting <code>&lt;li&gt;</code>s within each other: <code>validateDOMNesting(...): &lt;li&gt; cannot appear as a descendant of &lt;li&gt;.</code></p>
  
  <p>I'm using React 15.0.2.  I know they recently took out adding in <code>&lt;span&gt;</code>s and instead use react-text comment nodes such as <code>&lt;!-- react-text: 75 --&gt;"text"&lt;!-- /react-text --&gt;</code>, so I'm a little confused as to why this functionality didn't change as well.</p>
  
  <p>I'm curious if there's a way to get around this automatic wrapping, or if I just have to work around this by applying styles to elements within the <code>&lt;li&gt;</code>s instead of to the <code>&lt;li&gt;</code>s themselves.</p>
  
  <p><strong>Edit</strong>: This happens with the non-jsx syntax as well:</p>
  
  <pre><code>React.createElement(
    this.props.elementType,
    ...
  )
  </code></pre>
  
  <p><strong>EDIT</strong>: This appears to have been some kind of really weird caching issue. I was able to get the expected behaviour again by commenting and then uncommenting the second Component. :S</p>