React JS Warning: React.createElement:

Question

I am learning reactjs and I am getting errors when executing the code below:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>React Tutorial</title>

    <link rel="stylesheet" href="css/base.css" />
    <script type="text/javascript" src="scripts/react-15.0.1.js"></script>
    <script type="text/javascript" src="scripts/react-dom.js"></script>
    <script type="text/javascript" src="scripts/reactrouter-2.4.1.js"></script>
    <script type="text/javascript" src="scripts/babel-core-5.6.16-browser.js"></script>
    <script type="text/javascript" src="scripts/jquery-2.2.2.js"></script>
    <script type="text/javascript" src="scripts/marked-0.3.5.js"></script>
  </head>
  <body>

    <div id="app20"></div>
    <script type="text/javascript" src="scripts/index.js"></script>
    <script type="text/babel" src="scripts/example.js"></script>
  </body>
</html>

I am using react router to see how the menu works. index.js is classnames js of jedwatson and example.js contains code as below

    var Home = React.createClass({
       render() {
          return (    
             <div>
                <h1>Home...</h1>
             </div>
          );
       }
    });'

    var About = React.createClass({
       render() {
          return (
             <div>
                <h1>About...</h1>
             </div>
          );
       }
    });

    var Contact = React.createClass({
       render() {
          return (
             <div>
                <h1>Contact...</h1>
             </div>
          );
       }
    });



    var App20 = React.createClass({
       render() {
          return (
             <div>
                <ul>
                   <li><ReactRouter.Link to="/home">Home</ReactRouter.Link></li>
                   <li><ReactRouter.Link to="/about">About</ReactRouter.Link></li>
                   <li><ReactRouter.Link to="/contact">Contact</ReactRouter.Link></li>
                </ul>

               {this.props.children}
             </div>
          );
       }
    });


    ReactDOM.render((<ReactRouter history = {ReactRouter.browserHistory}>
                        <ReactRouter.Route path = "/" component = {App20}>
                        <ReactRouter.IndexRoute component = {Home} />
                        <ReactRouter.Route path = "home" component = {Home} />
                        <ReactRouter.Route path = "about" component = {About} />
                        <ReactRouter.Route path = "contact" component = {Contact} />
                        </ReactRouter.Route>
                    </ReactRouter>), document.getElementById('app20'));

This should render a menu with sections "about", "home", "contact" which are mapped by a react-router implementation. When clicking on one of the menu items the respective component should be rendered below the menu.

But I am getting the following 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).

And this error...

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

I would appreciate if you are able to help me.

Thanks in advance.

Possible duplicate of [What is a NullReferenceException, and how do I fix it?](http://stackoverflow.com/questions/4660142/what-is-a-nullreferenceexception-and-how-do-i-fix-it) — DVK, Jun 09 '16 at 14:57
Perhaps a shorter code will be easier for you and anyone trying to help to see the issue more clearly? — DannyB, Jun 09 '16 at 15:18

ctrlplusb · Answer 1 · 2016-06-09T14:46:02.620

0

You have a small typo. :)

    ReactDOM.render((<ReactRouter.Router history={ReactRouter.browserHistory}>
                    <ReactRouter.Route path = "/" component = {App20}>
                    <ReactRouter.IndexRoute component = {Home} />
                    <ReactRouter.Route path = "home" component = {Home} />
                    <ReactRouter.Route path = "about" component = {About} />
                    <ReactRouter.Route path = "contact" component = {Contact} />
                    </ReactRouter.Route>
                </ReactRouter.Router>), document.getElementById('app20'));

You were missing the <ReactRouter.Router ... part, you just had <ReactRouter ....

Also, there is an extra ' after your Home component:

                 <h1>Home...</h1>
         </div>
      );
   }
});'

edited Jun 09 '16 at 14:46

answered Jun 09 '16 at 14:36

ctrlplusb

12,847
6
55
57

many many thanks how can i make such a silly mistake you made my day. Now the code is working. I had an idea there must be some typo error i tried for 2/3 hours but failed and you solved it in seconds. I appreciate your help very much – Ganesh G Jun 09 '16 at 14:50
No problem! :) Good luck on your journey with React. Its super fun so keep at it! :) – ctrlplusb Jun 09 '16 at 14:51
When you start to feel more comfortable with React and have an IDE set up try looking into a tool such as `eslint` which helps to identify errors. I'm not sure if it would have picked up the `ReactRouter.Router` issue, but the loose `'` certainly would have been seen. – ctrlplusb Jun 09 '16 at 14:53
Thanks for guiding me i will surely follow your advice. The ' error occurred while typing in stackoverflow question it was not there in my original code. – Ganesh G Jun 10 '16 at 10:20

React JS Warning: React.createElement:

1 Answers1