Facebook's react.js -- object is not a function

Question

Going along Facebook's read.js tutorial, I get this error:

Uncaught TypeError: Property 'CommentList' of object [object Object] is not a function

In fact react.js's own examples page has:

Uncaught TypeError: object is not a function

Can anyone explain the correct usage?

---

My progress in Tutorial

Import the following two javascripts:

http://fb.me/react-0.4.1.js http://fb.me/JSXTransformer-0.4.1.js

The HTML is one line:

  <div id="content"></div>

And the javascript or rather <script type="text/jsx"> looks like this:

var CommentBox = React.createClass({
    render: function() {
        return (
           <div class="commentBox">
        <h1>Comments</h1>
        <CommentList />
        <CommentForm />
        </div>
        );
    }
});


React.renderComponent(
    <CommentBox />,
    document.getElementById('content')
);


var CommentList = React.createClass({
    render: function() {
        return (
        <div class="commentList">
        <Comment author="Pete Hunt">This is one comment</Comment>
        <Comment author="Jordan Walke">This is *another* comment</Comment>
        </div>
    );
    }
});

Solution

There are two main issues going on here.

First, when React.renderComponent is called, CommentList hasn't been assigned, and is therefore still undefined. This is causing an error because CommentBox's render function refers to

<CommentList />

which jsx compiles to

CommentList(null)

When this exectutes and CommentList is undefined, we get an error because undefined is not a function. To fix this, all we need to do is move the CommentList declaration before the call to React.renderComponent.

Second, Comment and CommentForm are not defined anywhere. We need to either remove the references to them, or bring in their declarations from the tutorial.

For reference, here's a jsfiddle of the original code: http://jsfiddle.net/jacktoole1/nHTr4/

And here's what the fixed up code looks like if we include the declaration of Comment but simply remove the reference to CommentForm: http://jsfiddle.net/jacktoole1/VP5pa/