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.

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.

25 users liked answer #0dislike answer #025
konsumer profile pic
konsumer

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.

11 users liked answer #1dislike answer #111
Sophie Alpert profile pic
Sophie Alpert

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.

2 users liked answer #2dislike answer #22
Amirhossein Mehrvarzi profile pic
Amirhossein Mehrvarzi

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}
/>
3 users liked answer #3dislike answer #33
WitVault profile pic
WitVault

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).