Reactstrap NavDropdown component doesn't open

Question

I am still new to react and am trying to use react and reactstrap for an internal project at work. I have spent several hours trying to the get the NavDropdown component to work. I have tried porting the example code from https://reactstrap.github.io/components/dropdowns/ into my project to just test it out and built my own nav taking cues from this example https://codepen.io/eddywashere/pen/KgjQay?editors=0010

However, I cannot get the Dropdown menu to open.

When I inspect the element I can see the NavDropdown and its child elements in the inspector. When I click on the DropDown element I can see that its state.isOpen toggles to true. However- the dropdown menu doesn't actually show, it remains closed.

I have no console.log errors and am really mystified about what I am doing wrong. Would love to learn my mistake on this one so we can use the library.

Here is the header component I am trying to use the NavDropDown in:

import React from 'react';
import { Navbar, Nav, NavDropdown, DropdownToggle, DropdownMenu, DropdownItem} from 'reactstrap';

class Header extends React.Component {
   constructor(props) {
      super(props);

      this.state = {
        dropdown: false
      };
      this.dropdownToggle = this.dropdownToggle.bind(this);
   }

   dropdownToggle() {
      this.setState({
        dropdown: !this.state.dropdown
      });
   }

   render() {
       return (      
         <header>
           <Navbar color="light">
              <Nav navbar>
                <NavDropdown isOpen={this.state.dropdown} toggle={this.dropdownToggle}>
                <DropdownToggle color="primary" nav caret>
                  Dropdown
                </DropdownToggle>
                <DropdownMenu>
                   <DropdownItem>Header</DropdownItem>
                   <DropdownItem>Action</DropdownItem>
                   <DropdownItem>Another Action</DropdownItem>
                   <DropdownItem>Another Action</DropdownItem>
               </DropdownMenu>
            </NavDropdown>
         </Nav>
      </Navbar>
    </header>
  );
}


   }
      export default Header

Here is App.js file I import the header into:

import React from 'react';
import Header from './shared/Header';

class App extends React.Component {
  render() {
    return ( 
        <div>
          <Header/>
        </div>
    );
  }
}

export default App;`

Here is my index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom'
import App from './comp/App';
import registerServiceWorker from './registerServiceWorker';
import 'bootstrap/dist/css/bootstrap.css';
import './Index.css';

ReactDOM.render(
  <BrowserRouter><App /></BrowserRouter>, 
  document.getElementById('root')
);
registerServiceWorker();

I used create-react-app to start the project and here is my package.json

{
  "name": "estimator",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "bootstrap": "^4.0.0-alpha.6",
    "node-sass-chokidar": "0.0.3",
    "prop-types": "^15.5.10",
    "react": "^15.6.1",
    "react-addons-css-transition-group": "^15.6.0",
    "react-addons-transition-group": "^15.6.0",
    "react-burger-menu": "^2.1.4",
    "react-dom": "^15.6.1",
    "react-icons": "^2.2.5",
    "react-loading": "^0.1.4",
    "react-modal": "^2.2.4",
    "react-router-dom": "^4.1.2",
    "react-scripts": "1.0.11",
    "reactstrap": "^4.8.0",
    "redux-thunk": "^2.2.0"
  },
  "scripts": {
    "build-css": "node-sass-chokidar src/ -o src/",
    "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
    "start-js": "react-scripts start",
    "start": "npm-run-all -p watch-css start-js",
    "build": "npm run build-css && react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "devDependencies": {
    "npm-run-all": "^4.0.2"
  }
}

I don't see anything wrong with what you're doing, i went through the documentation (doesn't say much, just examples) and all the examples had at least one DropdownItem with the "header" attr. Try that and comment your findings — Edgar Henriquez, Aug 25 '17 at 03:35
@edgaromar90 thank you for reviewing my code. I did add a header attr to the first DropdownItem - but no luck unfortunately. — Owen, Aug 25 '17 at 19:27
Can you tell me how did you install the package? Your code is working for me. — Edgar Henriquez, Aug 25 '17 at 20:02
@EdgarHenriquez I just ran the npm install command. I tried another clean install but the dropdown button doesn't open when I click it. — Owen, Aug 28 '17 at 23:02

score 0 · Answer 1 · answered Aug 25 '17 at 20:15

0

I encountered this when I moved from react-bootstrap (using bootstrap 3.3.7) to reactstrap.

Even though my package.json indicated "bootstrap": "^4.0.0-alpha.6" my configuration was still pulling 3.3.7.

I deleted my node_modules/bootstrap folder, did an npm install and it started working.

Maybe something to check?

answered Aug 25 '17 at 20:15

David Carpus

1
2

2

If you are not sure about the answer, it should be a comment. – Sagar Aug 25 '17 at 20:23
@DavidCarpus thank very much for the suggestion. I did a reinstall of all my dependancies... Unfortunately still not working... – Owen Aug 25 '17 at 23:27

Reactstrap NavDropdown component doesn't open

1 Answers1