title: ReactJS render return error Danger: Discarding unexpected node
body: <p>I have a SubMenu component. In its render function it has a simple if-else statement that checks which tab is active. Depending on the active tab, it returns some JSX. </p>
  
  <p>Here is the full SubMenu Component:</p>
  
  <pre><code>var SubMenu = React.createClass({
                  render: function(){
  
                      var subCategories = this.props.groupsData.objects[0].sub_groups.map(function(obj, index){
                          return (&lt;li&gt;&lt;a href="#"&gt;{obj.display_name}&lt;/a&gt;&lt;/li&gt;);   
                      }, this);
  
  
                     if (this.props.dprops.active_tab === 0){        // if the active tab is "All Videos"
                          return (&lt;div className="tabbable tabs-left item-list-container col-md-12 items-grid"&gt;
                                  &lt;ul className="nav nav-pills nav-stacked col-md-2" &gt;&lt;li className="active"&gt;&lt;a href="#"&gt;Most Recent&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;Most Popular&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;SearchBar /&gt;&lt;/li&gt;&lt;/ul&gt;
                              &lt;VideoDisplay itemsData={this.props.itemsData}/&gt;
                              &lt;/div&gt;);
                      } else {                                       // if the active tab is anything else
                           return (&lt;div className="tabbable tabs-left item-list-container col-md-12 items-grid"&gt;
                                  &lt;ul className="nav nav-pills nav-stacked col-md-2" &gt;{subCategories}&lt;li&gt;&lt;SearchBar /&gt;&lt;/li&gt;&lt;/ul&gt;
                              &lt;VideoDisplay itemsData={this.props.itemsData}/&gt;
                              &lt;/div&gt;);
                      }               
                  }
              });
  </code></pre>
  
  <p>Everything renders normally at first, but when I switch active Menu tabs, my SubMenu renders incorrectly (see pictures below) and if i change back to Active tab 0,  I receive the error: <code>Danger: Discarding unexpected node: &lt;li data-reactid=​".0.0.1.0.0.2.0"&gt;​…​&lt;/li&gt;​</code></p>
  
  <p><strong>The correct display on load:</strong>
  <img src="https://i.stack.imgur.com/4EdGv.png" alt="enter image description here">
  (Most Recent and Most Popular are SubMenu)</p>
  
  <p><strong>The incorrect display after switching to "Category 1" (Note: the extra Search Box):</strong> <img src="https://i.stack.imgur.com/14Tdp.png" alt="enter image description here"></p>
  
  <p>Any idea why this is happening and how I can fix it?</p>