Listing 13: fetching data from API.

.eslintrc.js

@@ -7,6 +7,7 @@ module.exports = {
   },
 
   "globals": {
+    "$": true,
     "jQuery": true,
     "React": true,
     "ReactDOM": true
@@ -239,8 +240,8 @@ module.exports = {
     "react/jsx-sort-props": 0, // Enforce props alphabetical sorting
     "react/jsx-uses-react": 2, // Prevent React to be incorrectly marked as unused
     "react/jsx-uses-vars": 2, // Prevent variables used in JSX to be incorrectly marked as unused
-    "react/no-did-mount-set-state": 2, // Prevent usage of setState in componentDidMount
-    "react/no-did-update-set-state": 2, // Prevent usage of setState in componentDidUpdate
+    "react/no-did-mount-set-state": 1, // Prevent usage of setState in componentDidMount
+    "react/no-did-update-set-state": 1, // Prevent usage of setState in componentDidUpdate
     "react/no-multi-comp": 0, // Prevent multiple component definition per file
     "react/no-unknown-property": 2, // Prevent usage of unknown DOM property
     "react/prop-types": 2, // Prevent missing props validation in a React component definition

public/scripts/tutorial.js

@@ -1,8 +1,3 @@
-let data = [
-  { id: 1, author: "Pete Hunt", text: "This is one comment" },
-  { id: 2, author: "Jordan Walke", text: "This is *another* comment" }
-];
-
 let Comment = React.createClass({
   rawMarkup: function () {
     let rawMarkup = marked(this.props.children.toString(), { sanitize: true });
@@ -51,6 +46,20 @@ let CommentBox = React.createClass({
   getInitialState: function () {
     return { data: [] };
   },
+  componentDidMount: function () {
+    $.ajax({
+      url: this.props.url,
+      dataType: "json",
+      cache: false,
+      success: function (result) {
+        console.log('Received frop api: ', result);
+        this.setState({ data: result });
+      }.bind(this),
+      error: function (xhr, status, err) {
+        console.error(this.props.url, status, err.toString());
+      }.bind(this)
+    });
+  },
   render: function () {
     return (
       <div className="commentBox">