How to make a Bootstrap dropdown with React - reactjs

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>Books</li>
<li>Podcasts</li>
<li>Tech I Like</li>
<li>About me</li>
<li>Add a Blog</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.

Answer 2

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>Books</li>
<li>Podcasts</li>
<li>Tech I Like</li>
<li>About me</li>
<li>Add a Blog</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.

Answer 3

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}
/>

Answer 4

If you don't want to employ rebuilt dependencies like react bootstrap to work with both react and bootstrap, simply do the important js tricks which they do. In your case, basically a dropdown click event toggles the popper wrapper with .show css class. So you can define an onClick method and toggle the class inside it. For example in the following code I get the nextSibling and then toggle the class name for it with .show and finally inner div will be shown:
<div className="dropdown">
<a className="btn text-light" href="#" onClick={(e) => this.handleOption(e)}>open dropdown</a>
<div className="dropdown-menu dropdown-menu-left dropdown-menu-arrow">
<a className="dropdown-item" href="#">edit</a>
<a className="dropdown-item" href="#">delete</a>
</div>
</div>
Note that this tricks help you in case of few bootstrap functionalities in your project, otherwise employ rebuilt dependencies to have a clean and standard code.