83702

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

<blockquote>

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.

</blockquote>

and a warning:

<blockquote>

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.

</blockquote>

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.

Answer1:

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

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>

Answer2:

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.

Recommend

  • Why the mssql object can not be identified?
  • In React.js how do you create a link to change the active tab using react-bootstrap?
  • How can i use Django smart select to filter ManyToManyField?
  • Client side validation mvc dropdown
  • Creating a DropDownList
  • Simulate click Geckofx vb,net
  • ListItem.Attributes.Add not working
  • How do I pass the string value parameter of the selected list item from an auto-populated dropdown l
  • Jquery UI tool tip close icon
  • MongoDB in PHP using aggregate to group by _id is null not working
  • Display issues when we change from one jquery mobile page to another in firefox
  • HTML download movie download link
  • script to move all files from one location to another location
  • WinForms: two way TextBox problem
  • Can I make an Android app that runs a web view in Chrome 39?
  • To display the title for the current loaction in map in iphone
  • Comma separated Values
  • AngularJs get employee from factory
  • trying to dynamically update Highchart column chart but series undefined
  • Error creating VM instance in Google Compute Engine
  • Hits per day in Google Big Query
  • how does django model after text[] in postgresql [duplicate]
  • Java static initializers and reflection
  • Exception on Android 4.0 `android.os.StrictMode$AndroidBlockGuardPolicy.onNetwork(StrictMode)`
  • Change div Background jquery
  • Turn off referential integrity in Derby? is it possible?
  • Authorize attributes not working in MVC 4
  • Bitwise OR returns boolean when one of operands is nil
  • Is there any way to bind data to data.frame by some index?
  • Django query for large number of relationships
  • Busy indicator not showing up in wpf window [duplicate]
  • costura.fody for a dll that references another dll
  • Why is Django giving me: 'first_name' is an invalid keyword argument for this function?
  • Observable and ngFor in Angular 2
  • How can I use `wmic` in a Windows PE script?
  • UserPrincipal.Current returns apppool on IIS
  • Python/Django TangoWithDjango Models and Databases
  • java string with new operator and a literal
  • Net Present Value in Excel for Grouped Recurring CF
  • How to push additional view controllers onto NavigationController but keep the TabBar?