Step 2

src/Container.js

@@ -1,12 +1,45 @@
-import React from 'react';
+import React, { useState } from 'react';
 import Input from './Input.js';
 import Results from './Results.js';
 
 function Container() {
+  const [state, setState] = useState({
+    data: [],
+    loading: false,
+    errorMessage: ''
+  });
+
+  const onChange = e => {
+    const term = e.target.value;
+
+    setState(s => ({
+      loading: true,
+      data: [],
+      errorMessage: ''
+    }));
+
+    fetch('https://fa-search-backend.herokuapp.com/search?delay=true&term=' + term).then(response => {
+      return response.json();
+    }).then(data => {
+      setState(s => ({
+        loading: false,
+        data,
+        errorMessage: ''
+      }));
+    }).catch(e => {
+      setState(s => ({
+        loading: false,
+        data: [],
+        errorMessage: e.message
+      }));
+    });
+  };
+
+
   return (
     <div className="container">
-      <Input />
-      <Results />
+      <Input loading={state.loading} onChange={onChange} />
+      <Results data={state.data} errorMessage={state.errorMessage} />
     </div>
   );
 }

src/Results.js

@@ -8,7 +8,7 @@ function Results({data = [], errorMessage = '', noResults = false}) {
       <div className="grid">
         { data.map(({name, uri}) =>
         <div key={uri} className="card grid-child">
-          <img src={uri} className="card-img-top" alt={name} />
+          <img src={'https://fa-search-backend.herokuapp.com/' + uri} className="card-img-top" alt={name} />
           <p className="card-text"><a href={'https://fontawesome.com/icons/' + name}>{name}</a></p>
         </div>
         )}