How to make a Bootstrap dropdown with React

Unfortunately this is one situation where React's ability to return only a single node from render is annoying. Your best bet is probably to return the <ul> itself from render:

render: function() {
  return (
    <ul className="dropdown-menu" id="dropdown">
      <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>
    </ul>
  );
}

then render that entire component into another container like a <div>. In a future version of React we're hoping to remove this restriction so that something like your original code will work.

You can use react-select react component.It is very simple and easy to use.

var Select = require('react-select');

var options = [
{ value: 'one', label: 'One' },
{ value: 'two', label: 'Two' }
];

function logChange(val) {
console.log("Selected: " + val);
} 

<Select
  name="form-field-name"
  value="one"
  options={options}
  onChange={logChange}
/>

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.