Source:  Twitter logo

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.

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

11 users liked answer #0dislike answer #011
Nisharg Shah profile pic
Nisharg Shah

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>
  );
}
0 users liked answer #1dislike answer #10
Yogesh Yadav profile pic
Yogesh Yadav

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.

0 users liked answer #2dislike answer #20
kevinskywalker profile pic
kevinskywalker

To solve this issue need to pass rootCloseEvent, for example

<DropdownButton                          
    title="Download"
    rootCloseEvent="mousedown"
  >
    <MenuItem
      onClick={}
    >
      PDF
    </MenuItem>
    <MenuItem
      onClick={}
    >
      CSV
</MenuItem>
<DropdownButton/>
0 users liked answer #3dislike answer #30
Krishnendu Pal profile pic
Krishnendu Pal

Copyright © 2022 QueryThreads

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