Error : Cannot read property 'map' of undefined
reactjs
Solution
First of all, set more safe initial data:
getInitialState : function() {
return {data: {comments:[]}};
},
And ensure your ajax data.
It should work if you follow above two instructions like Demo.
Updated: you can just wrap the .map block with conditional statement.
if (this.props.data) {
var commentNodes = this.props.data.map(function (comment){
return (
<div>
<h1>{comment.author}</h1>
</div>
);
});
}
Problem
I'm following the `reactjs` tutorial, and I keep running into an issue when passing the value from the state of one component into another component. The error `Cannot read property 'map' of undefined'` is thrown when the `map` function in the `CommentList` component is executed. What would cause the `prop` to be `undefined` when passing from `CommentBox` into the `CommentList`? ``` // First component var CommentList = React.createClass({ render: function() { var commentNodes = this.props.data.map(function (comment){ return <div><h1>{comment.author}</h1></div>; }); return <div className="commentList">{commentNodes}</div>; } }); // Second component var CommentBox = React.createClass({ getInitialState: function(){ return {data: []}; }, getComments: function(){ $.ajax({ url: this.props.url, dataType: 'json', success: function(data){ this.setState({data: data}) }.bind(this), error: function(xhr, status, err){ console.error(url, status, err.toString()) }.bind(this) }); }, componentWillMount: function(){ this.getComments() }, render: function(){ return <div className="commentBox">{<CommentList data={this.state.data.comments}/>}</div>; } }); React.renderComponent( <CommentBox url="comments.json" />, document.getElementById('content')); ```