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
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With