React-Bootstrap dropdown not expanding

Question

I've just started implementing React-Bootstrap in my site, but the NavDropdown component will not expand when clicking on it.

What I did: npm install -s react-bootstrap

Added css to html: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">

Created my Navigation component:

import React from 'react';
import PropTypes from 'prop-types';
import NavbarHeader from 'react-bootstrap/lib/NavbarHeader';
import NavItem from 'react-bootstrap/lib/NavItem';
import Nav from 'react-bootstrap/lib/Nav';
import Navbar from 'react-bootstrap/lib/Navbar';
import NavbarCollapse from 'react-bootstrap/lib/NavbarCollapse';
import NavbarBrand from 'react-bootstrap/lib/NavbarBrand';
import NavbarToggle from 'react-bootstrap/lib/NavbarToggle';
import NavDropdown from 'react-bootstrap/lib/NavDropdown';
import MenuItem from 'react-bootstrap/lib/MenuItem';

export class Header extends React.PureComponent {
  render() {
   return (
    <Navbar inverse collapseOnSelect>
    <NavbarHeader>
      <NavbarBrand>
        <a href="#">React-Bootstrap</a>
      </NavbarBrand>
      <NavbarToggle />
    </NavbarHeader>
    <NavbarCollapse>
      <Nav>
        <NavItem eventKey={1} href="#">Link</NavItem>
        <NavItem eventKey={2} href="#">Link</NavItem>
        <NavDropdown eventKey={3} title="Dropdown" id="basic-nav-dropdown">
          <MenuItem eventKey={3.1}>Action</MenuItem>
          <MenuItem eventKey={3.2}>Another action</MenuItem>
          <MenuItem eventKey={3.3}>Something else here</MenuItem>
          <MenuItem divider />
          <MenuItem eventKey={3.3}>Separated link</MenuItem>
        </NavDropdown>
      </Nav>
      <Nav pullRight>
        <NavItem eventKey={1} href="#">Link Right</NavItem>
        <NavItem eventKey={2} href="#">Link Right</NavItem>
      </Nav>
        </NavbarCollapse>
      </Navbar>
    );
  }
}

export default Header;

The dropdown will not expand: Gyazo Screenshare - Dropdown not expanding A click is being registered when inspecting the elements: Gyazo Screenshare - rerendering in dom

Any ideas on how and why this error occurs?

Edit: I am currently running on React 16

EDIT 2: Here's the Github repo.
https://github.com/Hespen/PWA-bootstrap npm install && npm run development -> localhost:1337

Answer 1

This is most probably a bug in react-bootstrap. The menu is actually showing and hiding instantly. If you check the code for NavDropdown.js you will see it contains <Dropdown.Menu /> as a container which uses <RootCloseWrapper /> for handling the closing of the menu. If you put a break point in the render() method of the DropdownMenu.js you will see that the first time this <RootCloseWrapper> is rendered as disabled as it should be. When you click the dropdown menu item the <RootCloseWrapper> is rendered as enabled and adds event listeners for click event to close the menu.

The problem is that the same event is then immediately processed in the RootCloseWrapper and the rootClose is triggered which closes the menu right away.

To check that it works

If you click on some other link and then use Tab key to focus the dropdown menu item you can expand the menu with the space bar or down arrow key.

Answer 2

Be sure to install react-dom $ npm install --save react react-dom and import "render", that should get it working. It's a requirement according to React-Bootstrap Getting Started page

I'm currently using React-Bootstram in one of my projects, these are the imports that work for me:

import React, { Component } from 'react';
import ReactDOM, {render} from 'react-dom';
import PropTypes from 'prop-types';
import { Nav, Navbar, NavItem, MenuItem, NavDropdown, Modal, Jumbotron } from 'react-bootstrap';

I hope this helps.

Answer 3

Your code is working with create-react-app with these dependencies versions, maybe try to update :

"dependencies": {
    "react": "^16.1.1",
    "react-bootstrap": "^0.31.5",
    "react-dom": "^16.1.1"
  }

Using the same css as your cdn link.

Btw avoid exporting your component twice (only use export default for a single component file)

Edit : you're using the same eventkey for 2 menu-item props maybe try to change this.

Answer 4

For me it was Bootstrap 4 with react-bootstrap. When you downgrade to Bootstrap 3.3.7 it works.