How to make a Bootstrap dropdown with React

Question

I am a noobie at React and I am trying to make a Bootstrap dropdown. The html that I am attaching to is here:

<ul class="dropdown-menu" id="dropdown"> </ul> 

And here is what I want to put in my render method to insert inside of my html:

render: function() {   return (       <li><a href="#books">Books</a></li>       <li><a href="#podcasts">Podcasts</a></li>       <li><a href="#">Tech I Like</a></li>       <li><a href="#">About me</a></li>       <li><a href="#addBlog">Add a Blog</a></li>     ); } 

But of course I can only return one element. What is the right way of doing this in React? How could I add multiple <li>'s into a dropdown like this? I tried wrapping the whole thing in a <div>, but that messes up my css.

Answer 1

react bootstrap makes working with react & bootstrap a bit easier:

render: function(){   return (     <DropdownButton title="Dropdown">       <MenuItem href="#books">Books</MenuItem>       <MenuItem href="#podcasts">Podcasts</MenuItem>       <MenuItem href="#">Tech I Like</MenuItem>       <MenuItem href="#">About me</MenuItem>       <MenuItem href="#addBlog">Add a Blog</MenuItem>     </DropdownButton>   ); } 

This looks about the same, but has event-handlers & adds all the right classes. As @sophie-alpert said, though, render must return a single DOM parent element.