Reactstrap NavDropdown component doesn't open - reactjs

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"
}
}

Answer 1

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?