Bootstrap Dropdown not working in React

Question

I'm trying to get a dropdown working inside a form for one of my React components. Here is how I'm setting up the dropdown portion of the code, the following is inside a form parent tag which is inside the div tag that I'm returning.:

//<div>
//<form>
//some code here

    <div className="row top-buffer">
        <div className="col">
            <div className="dropdown">
                <button 
                    className="btn btn-secondary dropdown-toggle" 
                    type="button" 
                    id="dropdownMenuButton" 
                    data-toggle="dropdown" 
                    aria-haspopup="true">
                    Dropdown
                </button>
                <div className="dropdown-menu" aria-labelledby="dropdownMenuButton">
                    <a className="dropdown-item" href="#nogo">Item 1</a>
                    <a className="dropdown-item" href="#nogo">Item 2</a>
                    <a className="dropdown-item" href="#nogo">Item 3</a>
                </div>
            </div>
        </div>
    </div>

//some code here
//</form>
//</div>

However, when I click the Dropdown button, it does not display the dropdown menu and the items in it.

All my other bootstrap components are working fine. What am I doing wrong?

EDIT:

I referenced bootstrap in my index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import 'bootstrap/dist/css/bootstrap.min.css'
import './App.css'
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

Am I missing something?

Answer 1

To make dropdown menu and other js stuff work in 4th Bootstrap you need just follow next steps: install with npm to dependencies:

npm i --save bootstrap jquery popper.js

add it to index.js

import 'bootstrap';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/js/bootstrap.js';
import $ from 'jquery';
import Popper from 'popper.js';

all steps are taken from here

Answer 2

It's because you've added HTML and CSS but not the js for it. Your code doesn't know what to do when you click on the dropdown. Here is an example how you have to do that. And the code below:

class Dropdown extends React.Component {
  state = {
    isOpen: false
  };

  toggleOpen = () => this.setState({ isOpen: !this.state.isOpen });

  render() {
    const menuClass = `dropdown-menu${this.state.isOpen ? " show" : ""}`;
    return (
      <div className="dropdown" onClick={this.toggleOpen}>
        <button
          className="btn btn-secondary dropdown-toggle"
          type="button"
          id="dropdownMenuButton"
          data-toggle="dropdown"
          aria-haspopup="true"
        >
          Dropdown
        </button>
        <div className={menuClass} aria-labelledby="dropdownMenuButton">
          <a className="dropdown-item" href="#nogo">
            Item 1
          </a>
          <a className="dropdown-item" href="#nogo">
            Item 2
          </a>
          <a className="dropdown-item" href="#nogo">
            Item 3
          </a>
        </div>
      </div>
    );
  }
}

ReactDOM.render(<Dropdown />, document.getElementById("root"));

Answer 3

In bootstrap-5 in app.js add the below files

import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap.bundle.min.js";

Happy coding

Answer 4

In App.js Import like this

import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

import "../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js";

Answer 5

If you use bootstrap ^5 you should use data-bs-* attributes like :

data-toggle="dropdown" must change to data-bs-toggle="dropdown"

So change all data-* wherever you use it.

If you use bootstrap 4 or Less than you should use jquery and popper.js like this:

  npm i --save bootstrap jquery popper.js

add it to index.js

    import 'bootstrap';
    import 'bootstrap/dist/css/bootstrap.css';
    import 'bootstrap/dist/js/bootstrap.js';
    import $ from 'jquery';
    import Popper from 'popper.js';

Answer 6

import "../node_modules/bootstrap/js/dist/dropdown.js"

Go inside the node_modules, then bootstrap, js, and dist. Inside that, you will find dropdown.js. Just import this and the dropdown will start working!

Answer 7

after a long searching and tweaking I got the answer here

you just have to add a css to resolve this issue. when you click on dropdown button, it adds a class "show" to that element and as per bootstrap that much is sufficient to make a dropdown button work.

.show>.dropdown-menu {
  display: block;
  position: absolute;
}

for me it work like charm.

I tries @teimurjan solution and it worked for me but with two issues

1. I have to manage a state even though its not needed
2. once dropdown clicked the expanded menu does not disappear on click of body or anywhere else.

Answer 8

For me this issue was fixed by using Bootstrap 4.5 instead of Bootstrap 5.

To do this with yarn write:

yarn remove bootstrap
yarn add bootstrap@^4.5

In index.js I then just import it like this.

import 'bootstrap';
import 'bootstrap/dist/css/bootstrap.css';

Answer 9

import 'bootstrap/dist/js/bootstrap'

add this to app.js or index.js file

Answer 10

Add bootstrap as a module -

npm i --save bootstrap

From my experience, please add this line to your index.js and try again -

import 'bootstrap';

Let me know how it goes.

Answer 11

I was missing an import

"../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js";

Now the dropdown is working for me.

Answer 12

To solve this issue need to pass rootCloseEvent, for example

 
    <DropdownButton                          
    title="Download"
    rootCloseEvent="mousedown"
  >
    <MenuItem
      onClick={}
    >
      PDF
    </MenuItem>
    <MenuItem
      onClick={}
    >
      CSV
</MenuItem>
<DropdownButton/>

Answer 13

Add onClick event and put event.stopPropagation().

Answer 14

If you're using Next.js, you should include a useEffect() in _app.js like so:

export default function App({ Component, pageProps }) {
    useEffect(() => {
        require("bootstrap/dist/css/bootstrap.min.css")
        require("bootstrap/dist/js/bootstrap.bundle.min.js")
    }, [])
    return (
        <>
            <Head>
                <meta name="viewport" content="width=device-width, initial-scale=1" />
            </Head>
            <Layout>
                <Component {...pageProps} />
            </Layout>
        </>
    )
}

Otherwise, it may give you an error saying "document is not defined".