Using Bootstrap with React: Bootstrap dropdown menu does not open

Question

DISCLAIMER: This question has been previously asked but not in a react context and the answers provide are not completely applicable to my case.

I am getting started with using Bootstrap with React by following this tutorial.

After installing Bootstrap, jquery, and popper:

npm install bootstrap jquery and popper.js

And adding them to src/index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import ThemeSwitcher from './components/themeSwitcher'

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

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

And creating the Themeswitcher component:

import React, { Component } from 'react';

class ThemeSwitcher extends Component {

  state = { theme: null }

  resetTheme = evt => {
    evt.preventDefault();
    this.setState({ theme: null });
  }

  chooseTheme = (theme, evt) => {
    evt.preventDefault();
    this.setState({ theme });
  }

  render() {

    const { theme } = this.state;
    const themeClass = theme ? theme.toLowerCase() : 'secondary';

    return (
      <div className="d-flex flex-wrap justify-content-center position-absolute w-100 h-100 align-items-center align-content-center">

        <span className={`h1 mb-4 w-100 text-center text-${themeClass}`}>{ theme || 'Default' }</span>

        <div className="btn-group">

          <button type="button" className={`btn btn-${themeClass} btn-lg`}>{ theme || 'Choose' } Theme</button>

          <button type="button" className={`btn btn-${themeClass} btn-lg dropdown-toggle dropdown-toggle-split`} data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <span className="sr-only">Toggle Theme Dropdown</span>
          </button>

          <div className="dropdown-menu">

            <a className="dropdown-item" href="#" onClick={e => this.chooseTheme('Primary', e)}>Primary Theme</a>
            <a className="dropdown-item" href="#" onClick={e => this.chooseTheme('Danger', e)}>Danger Theme</a>
            <a className="dropdown-item" href="#" onClick={e => this.chooseTheme('Success', e)}>Success Theme</a>

            <div className="dropdown-divider"></div>

            <a className="dropdown-item" href="#" onClick={this.resetTheme}>Default Theme</a>
          </div>

        </div>

      </div>
    );

  }

}

export default ThemeSwitcher;

This is what I get as a result:

So I believe that bootstrap works fine. But when I click nothing happens so I guess the problem lies somewhere with the integration of jquery?
PS: This is what I get in the inspection:

This is because the dropdowns rely on the bootstrap js file which you have not got loaded in. And to be honest, when it comes to bootstrap js powered elements and react, I would recommend you just create the functionality manually rather than loading in boostrapjs/popper/jquery for a simple dropdown — GBWDev
– GBWDev, Commented Jan 27, 2020 at 15:04
Because it saves you loading in entire additional libraries for the sake of a single element — GBWDev
– GBWDev, Commented Jan 27, 2020 at 15:12
@GBWDev but if I'm using a lot of bootstrap elements in my projects, then it would make sense. — AG_HIHI
– AG_HIHI, Commented Jan 27, 2020 at 15:15
Not necessarily. Just depends on whether a 'lot' of those elements depend on Bootstrap js and jquery — GBWDev
– GBWDev, Commented Jan 27, 2020 at 15:18

GBWDev · Accepted Answer · 2020-01-27 15:18:59Z

1

Following from the guide you linked, it looks like you've missed a dependency - Bootstrap.js

The required imports in the required order for index.js

import 'bootstrap/dist/css/bootstrap.min.css';
import $ from 'jquery';
import Popper from 'popper.js';
import 'bootstrap/dist/js/bootstrap.bundle.min'; // you forgot this

It's probably better to just use react-bootstrap though.

edited Jan 27, 2020 at 15:18

answered Jan 27, 2020 at 15:08

GBWDev

5965 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

AG_HIHI Over a year ago

Yes that's true! THanks

Luca Pierfederici · Accepted Answer · 2020-01-27 15:09:39Z

0

If you are in Bootstrap v4 you can use <button/> element instead of <a/>, so you don't have to pass event.

Then, are you sure that capitalized values classes exists in bootstrap? I think there is not btn-Primary, but there is btn-primary

Moreover, I suggest you to use react-bootstrap though.

answered Jan 27, 2020 at 15:09

Luca Pierfederici

1617 bronze badges

Comments

Suraj Auwal · Accepted Answer · 2020-01-27 16:17:54Z

0

You forgot to include the is File which is required for any interactivity ( like button drop-down)

Using bootstrap directly in react is not advisable. You are likely to run into problems like this. I'd advise you to use reactstrap or react-bootstrap ( I prefer the later) if you want to use bootstrap in your react app.

answered Jan 27, 2020 at 16:17

Suraj Auwal

3284 silver badges10 bronze badges

1 Comment

GBWDev Over a year ago

What is the purpose of adding this as answer when what you state has already been pointed out and explained?

Collectives™ on Stack Overflow

Using Bootstrap with React: Bootstrap dropdown menu does not open

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related