adding solution

react-async-gif-search-lab-onl01-seng-pt-041320/src/components/App.js

@@ -1,15 +1,17 @@
-import React from 'react'
+import React from "react";
 
-import NavBar from './NavBar'
+import NavBar from "./NavBar";
+import GifListContainer from "../containers/GifListContainer";
 
-// the App component should render out the GifListContainer component 
+// the App component should render out the GifListContainer component
 
 const App = () => {
   return (
     <div>
-        < NavBar color='black' title="Giphy Search" />
+      <NavBar color="black" title="Giphy Search" />
+      <GifListContainer />
     </div>
-  )
-}
+  );
+};
 
-export default App
+export default App;

react-async-gif-search-lab-onl01-seng-pt-041320/src/components/GifList.js

@@ -0,0 +1,14 @@
+import React from "react";
+
+const GifList = (props) => {
+  console.log(props);
+  return (
+    <div>
+      {props.gifs.map((gif) => (
+        <img key={gif.url} src={gif.url} alt="gif" />
+      ))}
+    </div>
+  );
+};
+
+export default GifList;

react-async-gif-search-lab-onl01-seng-pt-041320/src/components/GifSearch.js

@@ -0,0 +1,28 @@
+import React from "react";
+
+class GifSearch extends React.Component {
+  state = {
+    query: "",
+  };
+
+  handleSubmit = (event) => {
+    event.preventDefault();
+    this.props.fetchGifs(this.state.query);
+  };
+
+  render() {
+    return (
+      <div>
+        <form onSubmit={this.handleSubmit}>
+          <input
+            type="text"
+            value={this.state.query}
+            onChange={(event) => this.setState({ query: event.target.value })}
+          />
+        </form>
+      </div>
+    );
+  }
+}
+
+export default GifSearch;

react-async-gif-search-lab-onl01-seng-pt-041320/src/containers/GifListContainer.js

@@ -0,0 +1,36 @@
+import React, { Component } from "react";
+import GifList from "../components/GifList";
+import GifSearch from "../components/GifSearch";
+
+class GifListContainer extends Component {
+  state = {
+    gifs: [],
+  };
+
+  render() {
+    return (
+      <div>
+        <GifSearch fetchGIFs={this.fetchGIFs} />
+        <GifList gifs={this.state.gifs} />
+      </div>
+    );
+  }
+
+  fetchGIFs = (query = "dolphins") => {
+    fetch(
+      `https://api.giphy.com/v1/gifs/search?q=${query}&api_key=j5gbJI17mAkckytGHgiwdmoSctTLQglh&rating=g&limit=3`
+    )
+      .then((res) => res.json())
+      .then(({ data }) => {
+        this.setState({
+          gifs: data.map((gif) => ({ url: gif.images.original.url })),
+        });
+      });
+  };
+
+  componentDidMount() {
+    this.fetchGIFs();
+  }
+}
+
+export default GifListContainer;