1

I'm trying to learn ReactJS at the moment, with all the differing tutorials using ES5 / ES6 and all the other differences in versions of React it is a little frustrating to say the least. Can anyone see why the code below would throw the following error to console?

Error Message:

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)

Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, Navigation } from 'react-router'


/* 
    Main App layout
*/

var App = React.createClass ({
    render: function () {
        return (
            <div className="catch-of-the-day">
                <div className="menu">
                    <Header tagline="Seafood and Eat it!"/>
                </div>
                <Order/>
                <Inventory/>
            </div>
        )
    }
});


/*  Header */

var Header = React.createClass ({
    render: function() {
        return (
            <header className="top">
                <h1>Catch 
                <span className="ofThe">
                    <span className="of">of</span>
                    <span className="the">the</span>
                </span>
                  day</h1>
                <h3><span>{this.props.tagline}</span></h3>
            </header>
        )
    }
});

/*  Order */

var Order = React.createClass ({
    render: function() {
        return (
            <p>Order</p>
        )
    }
});

/*  <Inventory/> */

var Inventory = React.createClass ({
    render: function() {
        return (
            <p>Inventory</p>
        )
    }
});


/* 
    Store Picker
    This will let us make <StorePicker/>
*/

var StorePicker = React.createClass ({
    render: function () {
        return (
            <form className="store-selector">
                <h2>Please enter a store</h2>
                <input type="text" ref="storeId" />
                <input type="submit" />
            </form>
        )
    }
});

/* 
    Routes
*/

var Routes = (
    <Router>
        <Route path="/" component={StorePicker} />
        <Route path="/store/:storeid" component={App} />
    </Router>
)

ReactDOM.render(<Routes/>, document.querySelector('#main'));
Improve this question

3 Answers 3

Reset to default
2

Try this:

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, Navigation } from 'react-router'


ReactDOM.render(
    <Router>
        <Route path="/" component={StorePicker} />
        <Route path="/store/:storeid" component={App} />
    </Router>, 
    document.querySelector('#main'));
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Great thats working, so the issue was actually with my <Router> component?
Yes. I think the problem was here: component={StorePicker}. You shouldn't use quotes.
0

The code you show us does not include how your are importing your components StorePicker and App, but I can tell you that by writing

component="{App}"

You are passing a string as a parameter to the Route component, to pass your component, you should write:

<Route path="/store/:storeid" component={App} />

Hope this helps you!

Improve this answer

1 Comment

Thanks for helping, I have added my component code. I have also removed the "" from my routes (well spotted). Unfortunately i am still receiving the same error.
0

Ok the problem lay with my Router component, I was not actually rendering it properly, correct code below:

/* Routes */

var Routes = React.createClass({ render: function() { return ( ); } });

ReactDOM.render(, document.querySelector('#main'));

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.