Step 4: Fetch and render data from Giphy API

package.json

@@ -4,7 +4,8 @@
   "private": true,
   "dependencies": {
     "react": "^15.5.4",
-    "react-dom": "^15.5.4"
+    "react-dom": "^15.5.4",
+    "superagent": "^3.5.2"
   },
   "devDependencies": {
     "react-scripts": "1.0.7"
@@ -15,4 +16,4 @@
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   }
-}
+}

src/components/GifItem.js

@@ -3,7 +3,7 @@ import React from 'react';
 const GifItem = (image) => {
     return (
         <li>
-            <img src={image.gif.url} />
+            <img src={image.gif.images.downsized.url} alt="" />
         </li>
     )
 };

src/index.js

@@ -2,38 +2,30 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import GifList from './components/GifList';
 import SearchBar from './components/SearchBar';
+import request from 'superagent';
 
 class App extends React.Component {
     constructor() {
         super();
 
         this.state = {
-            gifs: [
-                {
-                    id: 1,
-                    url: 'http://fakeimg.pl/300/'
-                },
-                {
-                    id: 2,
-                    url: 'http://fakeimg.pl/300/'
-                },
-                {
-                    id: 3,
-                    url: 'http://fakeimg.pl/300/'
-                }
-            ]
-        }
+            gifs: []
+        };
     }
 
     handleTermChange(term) {
-        console.log(term);
+        const url = `http://api.giphy.com/v1/gifs/search?q=${term.replace(/\s/g, '+')}&api_key=dc6zaTOxFJmzC`;
+
+        request.get(url, (err, res) => {
+            this.setState({ gifs: res.body.data })
+        });
     }
 
     render() {
         return (
             <div>
-                <SearchBar onTermChange={this.handleTermChange} />
-                <GifList gifs={this.state.gifs} />
+                <SearchBar onTermChange={term => this.handleTermChange(term)}/>
+                <GifList gifs={this.state.gifs}/>
             </div>
         );
     }