Typescript React React.createElement: type should not be null, undefined, boolean, or number

Question

I am using TypeScript(1.8.10) and learning react. I am using React-Bootstrap to build a simple navigation as an example and I am getting the following error. THe error prevents the dom from getting rendered. I am totally new to react so not sure what I am doing wrong here. Thank you so much for any help or pointers to get past this error.

    // A '.tsx' file enables JSX support in the TypeScript compiler, 
// for more information see the following page on the TypeScript wiki:
// https://github.com/Microsoft/TypeScript/wiki/JSX
/// <reference path="./../../../typings/index.d.ts" />

import * as React from 'react';
import * as ReactBootstrap from 'react-bootstrap';
interface INavigationProps {
}

let Navbar = ReactBootstrap.Navbar;
let NavItem = ReactBootstrap.NavItem;
let MenuItem = ReactBootstrap.MenuItem;
let NavbarHeader = ReactBootstrap.NavbarHeader;
const dropdownItems = [
    { href: '#', name: 'Overview' },
    { href: '#', name: 'Setup' },
    { href: '#', name: 'Usage' },
];


export default class Navigation extends React.Component<INavigationProps, {}> {
    render() {

        return (
            <Navbar>
                <NavbarHeader href="homepage.html" name="Website Name"/>
                <NavItem>
                    <MenuItem link="about.html" title="About" />
                    <MenuItem link="contact.html" title="Contact" />
                    <MenuItem link="services.html" title="Services" />
                </NavItem>
            </Navbar>
        );
    }
}

    // A '.tsx' file enables JSX support in the TypeScript compiler, 
// for more information see the following page on the TypeScript wiki:
// https://github.com/Microsoft/TypeScript/wiki/JSX
/// <reference path="./../../typings/index.d.ts" />

import * as React from "react";
import * as ReactDOM from "react-dom";
import * as ReactBootstrap from 'react-bootstrap';

import HeaderNavigation from "./NavigationComponent/navigation";
import Hello from "./HelloComponent/Hello";

ReactDOM.render(
    <div>
        <HeaderNavigation />
        <Hello name="Athraya" />
   </div>,
    document.getElementById("root")
);

Isn't the component named Navigation, not HeaderNavigation? — Andrew Li
– Andrew Li, Commented Sep 13, 2016 at 3:33
@andrew the headernavigation is just a label which as you can see is pointing to the Navigation module — Vijay aravind
– Vijay aravind, Commented Sep 16, 2016 at 3:14

Community · Accepted Answer · 2017-05-23 12:08:22Z

0

Is your react version compatible with your react-bootstrap version, or bootstrap NAV facilities? according to this, maybe versions cause the error.

Or did you check react-router, because you are using Link property.did you check This?

edited May 23, 2017 at 12:08

CommunityBot

11 silver badge

answered Sep 13, 2016 at 4:44

sha

1573 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vijay aravind · Accepted Answer · 2016-09-16 03:09:26Z

Thank you so much Sahar. It turned out to be the Link Property which uses react-router. React Bootstrap is not dependent on react router and after reading through the link you provided and re reading react-bootstrap documentation I was able to get it working. I tried with the example code that is provided in react bootstrap and it works.

here is the working example in Typescript

export default class Navigation extends React.Component<INavigationProps, {}> {
render() {

    return (
        <Navbar inverse>
            <Navbar.Header>
                <Navbar.Brand>
                    <a href="#">React-Bootstrap</a>
                </Navbar.Brand>
                <Navbar.Toggle />
            </Navbar.Header>
            <Navbar.Collapse>
                <Nav>
                    <NavItem eventKey={1} href="#">Link</NavItem>
                    <NavItem eventKey={2} href="#">Link</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>
                <Nav pullRight>
                    <NavItem eventKey={1} href="#">Link Right</NavItem>
                    <NavItem eventKey={2} href="#">Link Right</NavItem>
                </Nav>
            </Navbar.Collapse>
        </Navbar>

    );
}

Collectives™ on Stack Overflow

Typescript React React.createElement: type should not be null, undefined, boolean, or number

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