Bootstrap Dropdown not working in React

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

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"));

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.