Foysal94 Foysal94 - 4 months ago 71
React JSX Question

ES6+React, Error:React.createElement: type should not be null, undefined, boolean, or number

Learning ReactJS with ES6. Trying to implement React-Bootstrap components. I am also using the react router. I am trying to implement the Navbar component.

It will just be a nabber with the brand and a search box. I aim to expand and use the search box component a lot more so I have put it in its own separate component below.

LocationSearchBox.js

import React, {PropTypes} from 'react'
import Form, {FormGroup, FormControl} from 'react-bootstrap'

export default function LocationSearchBox(props) {
return (
<FormGroup>
<FormControl type="text" placeholder="Search" />
<Button bsStyle="success" type="submit">Submit</Button>
</FormGroup>
)
}


The navber will be on all pages so I have put it in the topmost route and its component is the Main.js file shown below along with routes.js to manage client side routes.

import React, {Component} from 'react';
import {Navbar, NavbarHeader, NavbarBrand, NavbarCollapse} from 'react-bootstrap';
import {default as Search} from './LocationSearchBox'

export default class Main extends Component{

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

render() {
return(
<Navbar>
<NavbarHeader>
<NavbarBrand>
<a href="#">React-Bootstrap</a>
</NavbarBrand>
</NavbarHeader>
<NavbarCollapse>
<Search/>
</NavbarCollapse>
</Navbar>

)
}

}


routes.js

import React from 'react';
import ReactRouter, {Router, Route, IndexRoute, browserHistory} from 'react-router';
import Main from '../components/Main';

export var routes = (
<Router history={browserHistory}>
<Route path='/' component={Main} />

</Router>
);


Index.js is below and is the entry file to use in Webpack/babel

import React from 'react';
import ReactDOM from 'react-dom';
import {routes} from './config/routes';

ReactDOM.render(routes, document.getElementById('root'));


So when i run web pack-dev-server, go to localhost:8080 as the default port the main route should be hitting. I believe it does but I get errors, namely 3 of the same kind.

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 `Main`.


I believe it might be due to the way I am importing the Navbar components in Main.js, such as NavbarHeader, NavbarCollapse etc but that is a guess. I would really appreciate any help in solving this issue, thank you.

Answer

You are using the Button component without importing it:

<Button bsStyle="success" type="submit">Submit</Button>

Import it correctly and the issue should be resolved.