Bootstrap Dropdown is not working in React

Question

I include a dropdown button to React from bootstrap Dropdowns, But it is not working and shows as a normal button. Can you give me a solution for this?

<div className="dropdown">
    <button className="btn btn-secondary 
                 dropdown-toggle" 
                 type="button" 
                 id="dropdownMenuButton"
                 data-toggle="dropdown"
                 aria-haspopup="true" 
                 aria-expanded="false">
                 Dropdown button
    </button>
            <div className="dropdown-menu" aria-labelledby="dropdownMenuButton">
                <a className="dropdown-item" href="#">Action</a>
                <a className="dropdown-item" href="#">Another action</a>
                <a className="dropdown-item" href="#">Something else here</a>
            </div>
</div>

The output is a normal button like this.

@AjinKabeer I am not using react-bootstrap, I used "npm install bootstrap --save" this only. — Pulsara Sandeepa
– Pulsara Sandeepa, Commented Apr 19, 2020 at 14:09
Are you using create-react-app? Are other components being styled correctly by bootstrap or is it just dropdowns that it doesn't style? — Ajin Kabeer
– Ajin Kabeer, Commented Apr 19, 2020 at 14:11
Yes I am using create-react-app and others are styled correctly, only the dropdowns are not working — Pulsara Sandeepa
– Pulsara Sandeepa, Commented Apr 19, 2020 at 14:20

Nisharg Shah · Accepted Answer · 2020-04-19 20:03:07Z

11

Dropdowns are not working without popper.js and jquery.js.

So please install popper.js and jquery.js in your system using npm install popper.js jquery --save and don't forget to include it.

With CDN

https://stackblitz.com/edit/create-react-class-m3qfxu?file=index.html

With NPM

https://stackblitz.com/edit/create-react-class-xvsthx?file=index.js

edited Apr 19, 2020 at 20:03

answered Apr 19, 2020 at 19:38

Nisharg Shah

20k12 gold badges70 silver badges78 bronze badges

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

3 Comments

Pulsara Sandeepa Over a year ago

Can you tell me how to import popper.js?

Nisharg Shah Over a year ago

I give both examples, how to import it

Shivam Suchak Over a year ago

@PulsaraSandeepa first you need to install npm i --save bootstrap jquery popper.js then import Popper from 'popper.js'; in js file

Yogesh Yadav · Accepted Answer · 2021-07-28 17:57:47Z

If someone doesn't want to install other dependencies, they can make it work using react useState hook.

import React, { useState } from 'react';

export default function DropCard() {
  const [dropdown, setDropdown] = useState(false);
  const toggleOpen = () => setDropdown(!dropdown);

 return (
    <div className="dropdown">
        <button onClick={toggleOpen}>
          Dropdown
        </button>
        <div
          className={`dropdown-menu ${dropdown ? 'show' : ''}`}
          aria-labelledby="dropdownMenuButton"
          >
            <a className="dropdown-item" href="#">
              Delete
            </a>
            <a className="dropdown-item" href="#">
              Pin to your Profile
            </a>
         </div>
     </div>
  );
}

kevinskywalker · Accepted Answer · 2021-09-11 10:01:46Z

0

Make sure you have the bootstrap js imported correctly

npm install --save bootstrap then import "bootstrap/dist/js/bootstrap.min.js";

This worked for me.

answered Sep 11, 2021 at 10:01

kevinskywalker

1

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Krishnendu Pal · Accepted Answer · 2021-11-16 06:59:14Z

0

To solve this issue need to pass rootCloseEvent, for example

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

answered Nov 16, 2021 at 6:59

Krishnendu Pal

12 bronze badges

Collectives™ on Stack Overflow

Bootstrap Dropdown is not working in React

4 Answers 4

3 Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related