Async Giphy Search Lab
Instructions
You're going to be building out a Gif search using the Giphy API. In this lab, there are no tests to pass. Rather, your task is to create a working app in your browser using the instructions below. When finished, you should have an application that can take in a user's input, fetch JSON data from the Giphy API, and display the results.
Getting Started
The URL for the API is
https://api.giphy.com/v1/gifs/search?q=YOUR QUERY HERE&api_key=dc6zaTOxFJmzC&rating=g
While the above API key may work, we recommend creating your own API key by following the instructions on Giphy's developer site. Creating a key is free and only requires an account. Using your own key will prevent any potential rate limiting if other students are also working on this lesson.
Once you've got your key, you should be able to access the Giphy API from a browser and receive a JSON response to confirm everything is working.
https://api.giphy.com/v1/gifs/search?q=dolphin&api_key=YOUR API KEY&rating=g
You should get back an array of objects, each containing information about a particular image.
"data": [
{
"type": "gif",
"id": "l0HlNQ03J5JxX6lva",
"slug": "bbc-wildlife-l0HlNQ03J5JxX6lva",
"url": "https://giphy.com/gifs/bbc-wildlife-l0HlNQ03J5JxX6lva",
"bitly_gif_url": "https://gph.is/2iC32M8",
"bitly_url": "https://gph.is/2iC32M8",
...
"images": {
"fixed_height_still": {
"url": "https://media0.giphy.com/media/l0HlNQ03J5JxX6lva/200_s.gif?cid=e1bb72ff5b9fa2866168584b51f13892",
"width": "400",
"height": "200",
"size": "55556"
},
...
"original": {
"url": "https://media0.giphy.com/media/l0HlNQ03J5JxX6lva/giphy.gif?cid=e1bb72ff5b9fa2866168584b51f13892",
"width": "480",
"height": "240",
}
...
}
}
]Note: Notice there are many URL keys on each image object. The first url
key, just below type, id, and slug, will bring you to the images page on
giphy.com. We only want the path to the actual image,
which is found at images.original.url. Using other url keys may cause CORS
issues.
Your Components
App
Your top level component will be the App component - no surprises there!
It will be responsible for rendering the NavBar component (this component
is already provided for you, note the project has bootstrap loaded in) and the
GifListContainer component.
GifListContainer
GifListContainer should be a component that does data fetching and then
renders its corresponding sub-component. That’s it.
In our app, the GifListContainer will be responsible for fetching the data
from the Giphy API, storing the first 3 gifs from the response in its component
state, and passing that data down to its child, the GifList component,
as a prop.
It will also render a GifSearch component that renders the form.
GifListContainer should pass down a submit handler function to
GifSearch as a prop.
GifList
GifList receives data from its props and renders html given the input
data. It can render a top level <ul> with each gif as an <li>.
GifSearch
The GifSearch component will render a form that receives the user input
for the Giphy search. The text input should be a controlled component that
stores the value of the input in its component state and renders the DOM
accordingly. The React component is always in charge of what the DOM looks like.
GifSearch should receive a callback prop from its parent. On a submit
event, it should invoke that callback prop with the value of the text input. It
is this callback function, defined in GifListContainer, that will actually
query the API with the text the user has entered.