###ES6 arrow function
Nice work utilizing functional programming (i.e. .map()
) and the arrow function. One improvement here is that there isn't much of a need for a code block (i.e. { ....}
) and return
statement. So the callback to .map()
in the render
method can be reduced to a single line like below:
render() {
return <ul> {
this.state.comments.map((comment) => <li>{comment.body}—{comment.author}</li>)
}</ul>;
}
###jQuery - just for AJAX requests?
It appears that the only jQuery functionality used is its AJAX wrapper (i.e. $.ajax()
). If that is all jQuery is used for, consider using a different technique like the fetch API (read this article for more info).
componentDidMount() {
fetch(JSON_URL)
.then(response => response.json())
.then(data => this.setState({comments: data.comments}));
See this plunker for a demonstration.
##Update It has been mentioned that the fetch API has no support for aborting the request. If that is desired, there are other alternatives like Superagent (recommended by you might not need jQuery). See this updated plunker for an example of using superagent with its abort method in the componentWillUnmount method.