TypeError: this.props.data.map is not a function, but the data is a list
I wrote code from the ReactJs site here while working on my commentary tutorial. However, for some reason, it gives me an error about the map:
Uncaught TypeError: this.props.data.map is not a function
In particular, it complains about line 7: var commentNodes = this.props.data.map(function (comment){ .. etc.. }
This error is especially confusing because the data is a list. Here is the complete code showing that:
var CommentList = React.createClass({
render: function(){
console.log(data)
var commentNodes = this.props.data.map(function (comment){
return (<Comment author={comment.author}>
{comment.text}
</Comment>);
});
return (<div className="commentList">
{commentNodes}
</div>);
}
});
var Comment = React.createClass({
render: function(){
return (<div className="comment">
<h2 className="commentAuthor">
{this.props.author}
</h2>
{this.props.children}
</div> );
}
});
var CommentForm = React.createClass({
render: function(){
return (<div className="commentForm">I am a comment form!</div>);
}
});
var CommentBox = React.createClass({
render: function() {
return (<div className="commentBox">
<CommentList data="{this.props.data}" />
<CommentForm />
</div>);
}
});
var data = [
{author: "Pete Hunt", text: "This is one comment"},
{author: "Jordan Walke", text: "This is *another* comment"}
];
React.render(<CommentBox data={data} />, document.getElementById('content'));
+3
source to share