Dropdown is not working in reactJS Bootstrap

Question

I am using reactJS with Bottstrap. I am trying to put user image and with drodown. so when user click on dropdown the the dropdown will open.

My dropdown is not working.

Here is my code. :

    <div class="dropdown">
   <a href="#" data-toggle="dropdown" class="nav-item nav-link dropdown-toggle user-action">
   <img class = "loginImage" src="https://someImage" class="bi bi-person" alt="Avatar"></img>
   </a> 
   <ul class="dropdown-menu">
      <li>
         <a href="#" class="dropdown-item"> Profile A</a>
      </li>
      <li>
         <a href="#" class="dropdown-item"> Profile B</a>
      </li>
      <li>
         <a href="#" class="dropdown-item"> Profile C</a>
      </li>
      <li>
         <a href="#" class="dropdown-item">Profile D</a>
      </li>
   </ul>
</div>

Any help here or any other way to implement this.

My Dependency :

    "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.35",
    "@fortawesome/free-solid-svg-icons": "^5.15.3",
    "@fortawesome/react-fontawesome": "^0.1.14",
    "@popperjs/core": "^2.9.2",
    "@testing-library/jest-dom": "^5.13.0",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "axios": "^0.21.1",
    "bootstrap": "^5.0.1",
    "bootstrap-icons": "^1.5.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-popper": "^2.2.5",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.2"
  },

@Apostolos one quixk questio, how u sure that this code is from version 3. Because i am using code from bootstrap 5 only from this page. getbootstrap.com/docs/5.0/components/dropdowns — David
– David, Commented Jun 24, 2021 at 6:20

Apostolos · Accepted Answer · 2021-06-24 06:29:38Z

3

In order for the dropdown to work with bootstrap, you need to import @popperjs/core dependency.

bootsrap 5 has dropped dep on jquery so there is no need anymore to import jquery

Check my sandbox

answered Jun 24, 2021 at 6:29

Apostolos

10.5k5 gold badges32 silver badges44 bronze badges

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

10 Comments

David Over a year ago

Nope no luck for me even after adding @popperjs/core

Apostolos Over a year ago

you need to import bootstrap and popper. check the sandbox and the imports.

Apostolos Over a year ago

import "bootstrap/dist/css/bootstrap.min.css"; import "@popperjs/core"; import "bootstrap";

David Over a year ago

I have run this command in my terminal npm i react-popper @popperjs/core I have updated the dependency in question. correct me if i m wrong. I m new in reactJS

Apostolos Over a year ago

didnt quite understand. you mean to add an image instead of text? you can easily add an iomage of height e.g. 40px and then apply the equivalent css to remove the background from the container div

|

Collectives™ on Stack Overflow

Dropdown is not working in reactJS Bootstrap

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related