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:

.4.1.js .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="mentBox">
        <h1>Comments</h1>
        <CommentList />
        <CommentForm />
        </div>
        );
    }
});


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


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

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="mentBox">
        <h1>Comments</h1>
        <CommentList />
        <CommentForm />
        </div>
        );
    }
});


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


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

• javascript
• facebook
• markdown
• frontend
• reactjs

Share Improve this question Follow edited Sep 12, 2013 at 20:36 john mangual asked Sep 12, 2013 at 17:54 john mangualjohn mangual 8,1721313 gold badges5858 silver badges9696 bronze badges 1

• Did you try to set return statment with return('....'). They are missing. – zer02 Commented Sep 12, 2013 at 20:41

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 11

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 piles 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/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/jacktoole1/VP5pa/