React.NET uncaught TypeError: undefined is not a function

Question

I am trying to learn ReactJs and found React.NET.

Followed the tutorial on the author's website with the only change being an MVC 5 app instead of MVC 4.

Here is the jsx:

/** @jsx React.DOM */
var CommentBox = React.createClass({
  render: function() {
    return (
      <div className="commentBox">
        <h1>Comments</h1>
        <CommentList data={this.props.data} />
        <CommentForm />
      </div>
    );
  }
});

React.renderComponent(
  <CommentBox data={data} />,
  document.getElementById('content')
);


var CommentList = React.createClass({
  render: function() {
    var commentNodes = this.props.data.map(function (comment) {
      return <Comment author={comment.Author}>{comment.Text}</Comment>;
    });
    return (
      <div className="commentList">
        {commentNodes}
      </div>
    );
  }
});


var CommentForm = React.createClass({
  render: function() {
    return (
      <div className="commentForm">
        Hello, world! I am a CommentForm.
      </div>
    );
  }
});

var data = [
  { Author: "Daniel Lo Nigro", Text: "Hello ReactJS.NET World!" },
  { Author: "Pete Hunt", Text: "This is one comment" },
  { Author: "Jordan Walke", Text: "This is *another* comment" }
];

It gives this error:

Uncaught TypeError: undefined is not a function

Error in console

Any clues on this one?

Regards.

Looking at the tutorial, should it be <CommentList data={this.props.data} />? — user3559349
– user3559349, Commented Jun 21, 2014 at 7:35

Douglas · Accepted Answer · 2014-06-21 10:14:05Z

2

There are three steps in the snippet.

First, define the CommentBox:

var CommentBox = React.createClass...

Second, render the CommentBox and the CommentList:

React.renderComponent...

Third, define the CommentList:

var CommentList = React.createClass...

So, the problem is that the CommentList is rendered before the CommentList is defined. If the last two steps were switched around then it would work fine. The CommentList class needs to be defined before it can be rendered.

answered Jun 21, 2014 at 10:14

Douglas

37.8k9 gold badges80 silver badges91 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

rodmclaughlin · Accepted Answer · 2014-10-27 21:38:29Z

1

CommentForm is also defined in the wrong place - it needs to be defined before it's referred to. The React tutorial has it the wrong way round: http://facebook.github.io/react/docs/tutorial.html

The correct order for the definition of the classes in the Javascript is:

var Comment = React.createClass

...
var CommentList = React.createClass

...
var CommentForm = React.createClass

...
var CommentBox = React.createClass

...

answered Oct 27, 2014 at 21:38

rodmclaughlin

3813 silver badges8 bronze badges

1 Comment

rodmclaughlin Over a year ago

And another thing the authors of the tutorial forgot to add: in the html file, instead of <script type="text/jsx"> you need <script type="text/jsx" src="/tutorial.js"> (depending on where you put tutorial.js)

PeterDNCO · Accepted Answer · 2015-06-09 16:14:15Z

0

I had this happen whilst working through the tutorial and found that declaring the var data = [...] at the top of the jsx script resolved the issue. So it would appear that the engine is not hoisting variables properly?

answered Jun 9, 2015 at 16:14

PeterDNCO

3961 silver badge7 bronze badges

Collectives™ on Stack Overflow

React.NET uncaught TypeError: undefined is not a function

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related