title: How to make a Bootstrap dropdown with React
body: <p>I am a noobie at <code>React</code> and I am trying to make a <code>Bootstrap</code> dropdown.  The html that I am attaching to is here:</p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;ul class="dropdown-menu" id="dropdown"&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>And here is what I want to put in my <code>render</code> method to insert inside of my html:</p>
  
  <pre class="lang-js prettyprint-override"><code>render: function() {
    return (
        &lt;li&gt;&lt;a href="#books"&gt;Books&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#podcasts"&gt;Podcasts&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Tech I Like&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;About me&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#addBlog"&gt;Add a Blog&lt;/a&gt;&lt;/li&gt;
      );
  }
  </code></pre>
  
  <p>But of course I can only return one element.  What is the right way of doing this in <code>React</code>?  How could I add multiple <code>&lt;li&gt;</code>'s into a dropdown like this?  I tried wrapping the whole thing in a <code>&lt;div&gt;</code>, but that messes up my css.</p>