Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap Dropdown not working in React

Tags:

I'm trying to get a dropdown working inside a form for one of my React components. Here is how I'm setting up the dropdown portion of the code, the following is inside a form parent tag which is inside the div tag that I'm returning.:

//<div> //<form> //some code here      <div className="row top-buffer">         <div className="col">             <div className="dropdown">                 <button                      className="btn btn-secondary dropdown-toggle"                      type="button"                      id="dropdownMenuButton"                      data-toggle="dropdown"                      aria-haspopup="true">                     Dropdown                 </button>                 <div className="dropdown-menu" 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>         </div>     </div>  //some code here //</form> //</div> 

However, when I click the Dropdown button, it does not display the dropdown menu and the items in it.

All my other bootstrap components are working fine. What am I doing wrong?

EDIT:

I referenced bootstrap in my index.js:

import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import 'bootstrap/dist/css/bootstrap.min.css' import './App.css' import registerServiceWorker from './registerServiceWorker';  ReactDOM.render(<App />, document.getElementById('root')); registerServiceWorker(); 

Am I missing something?

like image 897
FlameDra Avatar asked Jun 22 '18 03:06

FlameDra


People also ask

Why bootstrap dropdown not working in react?

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.

Why is my bootstrap 5 dropdown not working?

Solution : The dropdown should be toggled via data attributes or using javascript. In the above program, we have forgotten to add a data attribute so the dropdown is not working. So add data-bs-toggle="dropdown" to toggle the dropdown.


2 Answers

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

like image 133
Alexey Nikonov Avatar answered Sep 20 '22 01:09

Alexey Nikonov


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")); 
like image 26
teimurjan Avatar answered Sep 21 '22 01:09

teimurjan