Uncaught TypeError: this.props.data.map is not a function - React CommentBox Tutorial w/ ES6

Question

I am learning React with ES6 and working on the basic example Facebook's tutorial walks you through. I have successfully put everything together (I built a small JSON API using the Lux Framework to serve to the application), but am running into one error:

Uncaught TypeError: this.props.data.map is not a function

I know this is happening because my data is not being properly fetched in loadCommentsFromServer() , but can't seem to figure out why. Was hoping for a push in the right direction or an explanation as to why what I am doing is wrong.

I've provided a gist to the file because SO's markdown was being weird with the formatting when I included the whole file.

gist - App.js

gist - JSON being passed

Answer 1

This issue was that I was not properly passing context: this into the AJAX call when fetching the data and that I need to step into the data attribute when setting the state with this.setState({ data: data.data }) , becuase of the formatting of JSON API .

An additional issue I found was that I was not passing the unique key with the <Comment /> component when rendering.

gist- Updated App.js

Thank you to @erik-sn for leading me in the right direction.