Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React-Bootstrap dropdown not expanding

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

like image 855
Hespen Avatar asked Nov 18 '17 16:11

Hespen


1 Answers

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.

like image 82
Edwin Barahona Avatar answered Sep 20 '22 19:09

Edwin Barahona