Twitter Bootstrap Question posted in

Error rendering react-bootstrap components – Twitter bootstrap

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.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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.


  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search