Facebook react.js - the object is not a function

Question

Following the Facebook read.js tutorial , I get this error:

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

Actually the actions.js page has:

 Uncaught TypeError: object is not a function 

Can someone explain the correct use?

---

My progress in the textbook

Import the following two javascripts:

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

HTML - one line:

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

And 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> ); } }); 

Answer 1

There are two main questions here.

First, when React.renderComponent is called, CommentList is not assigned and therefore remains undefined. This causes an error because the CommentBox visualization function refers to

 <CommentList /> 

which jsx compiles to

 CommentList(null) 

When these are exectutes and CommentList undefined, we get an error because undefined is not a function. To fix this, we just need to move the CommentList declaration before calling React.renderComponent.

Secondly, comments and comments are not defined anywhere. We need to either remove links to them, or make our ads from the textbook.

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

And this is what the corrected code looks like if we include a comment declaration, but just remove the CommentForm link: http://jsfiddle.net/jacktoole1/VP5pa/