Error rendering react-bootstrap components

Question

I have recently migrated from using twitter-bootstrap in react classes to using react-bootstrap. I wanted to test out react-bootstrap Navbar. My code is as:

import React from 'react';
import { Link } from 'react-router';
import Radium from 'radium';
import Grid from 'bootstrap-grid-react';
import * as bootstrap from "react-bootstrap";


export default class Layout extends React.Component {

    constructor() {
        super();
        this.state = {};
    }

    render() {
        let {Nav, Navbar, NavItem, NavDropdown, MenuItem} = bootstrap;
        return (
            <div>
                <Navbar>
                    <Navbar.Header>
                      <Navbar.Brand>
                        <a href="#">APITest</a>
                      </Navbar.Brand>
                    </Navbar.Header>
                    <Nav>
                      <NavItem eventKey={1} href="#">New user
                      </NavItem>
                      <NavItem eventKey={2} href="#">Create New User</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>
                </Navbar>
            </div>

        )
    }
}

However this gives me an error

Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of Layout .

and a warning:

Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of Layout .

I also tried using import {Nav, Navbar, NavItem, NavDropdown, MenuItem} from 'react-bootstrap' but it also won't work. There is definitely a problem in how I am using Navbar because a normal div is rendering just fine.

Any help is really appreciated.

Answer 1

After dealing with this for way too long, I've found that the problem is the Link component you're using from react-router . I'm not exactly sure on the specifics of the error, but there is a solution. Instead of using Link use the LinkContainer component provided by react-bootstrap-router https://github.com/react-bootstrap/react-router-bootstrap .

From the react-router-bootstrap docs:

npm i -S react-router-bootstrap

In your code use:

<LinkContainer to={{ pathname: '/foo', query: { bar: 'baz' } }}>
  <Button>Foo</Button>
</LinkContainer>

Answer 2

After a long time struggling with it, I finally got it to work the problem being the extra div above the Navbar .

This is my Final working code:

import React from 'react';
import { Link } from 'react-router';
import Radium from 'radium';
import Grid from 'bootstrap-grid-react';
import {Nav, Navbar, NavItem, NavDropdown, MenuItem} from "react-bootstrap";


export default class Layout extends React.Component {

    constructor() {
        super();
        this.state = {};
    }

    render() {
        return (
                <Navbar>
                    <Navbar.Header>
                      <Navbar.Brand>
                        <a href="#">APITest</a>
                      </Navbar.Brand>
                    </Navbar.Header>
                    <Nav>
                      <NavItem eventKey={1} href="#">New user
                      </NavItem>
                      <NavItem eventKey={2} href="#">Create New User</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>
                </Navbar>

        )
    }
}

I still don't know the reason for an error when wrapping the Navbar in a div. Feel free to comment for any explanation.