ReactJS fails with an error "Cannot read property 'map' of undefined`"
reactjs
Solution
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.
Problem
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.