ReactJS fails with an error "Cannot read property 'map' of undefined`"

Question

Following react.js tutorial I've got an error: Uncaught TypeError: Cannot read property 'map' of undefined.

I was following the tutorial strict but stuck at Fetching from the server part. The error appears when I feed commentBox with url data instead of the hardcoded JSON data.

/** @jsx React.DOM */

var converter = new Showdown.converter();

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" }
];

var Comment = React.createClass({
  render: function() {
  var rawMarkup = converter.makeHtml(this.props.children.toString());
    return (
      <div className="comment">
        <h2 className="commentAuthor">
          {this.props.author}
        </h2>
        <span dangerouslySetInnerHTML={{__html: rawMarkup}} />
      </div>
    );
  }
});

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 CommentBox = React.createClass({
  render: function() {
    return (
      <div className="commentBox">
        <h1>Comments</h1>

        <CommentList data={this.props.data} />

        <CommentForm />
      </div>
    );
  }
});

React.renderComponent(
  //<CommentBox data={data}/>,            //this works fine
  <CommentBox url="/comments" />,         //Changing data feet to url produces an error
  document.getElementById('content')
);

The request at http://localhost:52581/comments is working and returns a JSON 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"}]

Any advice would be a big help for me. Thanks.

Does this answer your question? [Line 0: Parsing error: Cannot read property 'map' of undefined](https://stackoverflow.com/questions/62079477/line-0-parsing-error-cannot-read-property-map-of-undefined) — Henke, Mar 23 '22 at 14:01

score 13 · Accepted Answer · answered Jul 16 '14 at 20:00

13

In CommentBox, this line is the problem: <CommentList data={this.props.data} />

You no longer have props.data since you are passing a URL in instead of a JS object.

Your 2nd one works because you use state and default the value to an empty array, which can still have map run on it.

answered Jul 16 '14 at 20:00

Paul O'Shannessy

2,498
17
10

3

Yep. Ran into this problem too. The tutorial adds a comment 'Note: the code will not be working at this step.' – dpigera Jan 04 '16 at 01:20
2

@unicornherder damn it. they could have made this bold – vumaasha May 16 '16 at 13:58

score 9 · Answer 2 · answered Mar 18 '15 at 15:17

I also had this exact problem - the tutorial doesn't make it clear at this point, but I don't think the app is actually supposed to be properly loading the data at this point. If you continue working through the tutorial it has you build an ajax call using this.props.url which loads the data. Just FYI for anyone else who might be confused, just keep pressing on, all is good!

score 2 · Answer 3 · edited Oct 23 '18 at 11:27

This one works.

/** @jsx React.DOM */

var converter = new Showdown.converter();

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

var Comment = React.createClass({
  render: function() {
  var rawMarkup = converter.makeHtml(this.props.children.toString());
    return (
      <div className="comment">
        <h2 className="commentAuthor">
          {this.props.author}
        </h2>
        <span dangerouslySetInnerHTML={{__html: rawMarkup}} />
      </div>
    );
  }
});

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 CommentBox = React.createClass({
  getInitialState: function() {
    return {data: []};
  },
  componentWillMount: function() {
    var xhr = new XMLHttpRequest();
    xhr.open('get', this.props.url, true);
    xhr.onload = function() {
      var data = JSON.parse(xhr.responseText);
      this.setState({ data: data });
    }.bind(this);
    xhr.send();
  },
  render: function() {
    return (
      <div className="commentBox">
        <h1>Comments</h1>

        <CommentList data={this.state.data} />

        <CommentForm />
      </div>
    );
  }
});

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

score 0 · Answer 4 · edited Oct 23 '18 at 11:27

This error can also happen because you're trying to embed a react component as if it was a rendered result, and not a component itself.

e.g.

var SampleClass = React.createClass({
...
});

and later on you try and use it like so

<div>
  {SampleClass}
</div>

when in fact, you should be doing something like this

<div>
  <SampleClass/>
</div>

I was getting a similar error, "Cannot read property 'ref' of undefined", and this was the issue.

ReactJS fails with an error "Cannot read property 'map' of undefined`"

4 Answers4

Linked

Related