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.

import {Nav, Navbar, NavItem, NavDropdown, MenuItem} from 'react-bootstrap' works perfectly fine. — Matthew Herbst
– Matthew Herbst, Commented Apr 21, 2016 at 6:36
@MatthewHerbst It did not I tried it too. Still got the same error. — Shubham Khatri
– Shubham Khatri, Commented Apr 21, 2016 at 6:40

Shubham Khatri · Accepted Answer · 2016-04-25 09:36:34Z

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.

codepringle · Accepted Answer · 2016-05-21 13:19:56Z

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>

answered May 21, 2016 at 13:19

codepringle

3412 silver badges14 bronze badges

Collectives™ on Stack Overflow

Error rendering react-bootstrap components

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related