Answer a 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.

Answers

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.