Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Video Player
00:00
00:00
00:00
- 2x 2x
- 1.75x 1.75x
- 1.5x 1.5x
- 1.25x 1.25x
- 1.1x 1.1x
- 1x 1x
- 0.75x 0.75x
- 0.5x 0.5x
In this video, we'll wire the app up to the Giphy API results and display them as a list of animated GIFs.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
In this video, we'll wire the app
up to the GIPHY API results and
0:00
display them as a list of animated GIFs.
0:05
In our app, the app component is
the container responsible for rendering
0:09
the markup of the app as well as child
components like GifList and SearchForm.
0:14
You'll learn more about the SearchForm
component in the next video.
0:21
So the GifList component
contains the wrapping ul element
0:25
that will display our list of
Gifs via the Gif component.
0:30
And the Gif component is
a presentational component
0:35
containing the template
that displays each Gif.
0:39
So the App component is aware
of the application as a whole.
0:43
And it not only initializes and updates
the Gifs state with the response data,
0:48
but it's also going to provide the data
and behavior to it's child components.
0:53
In React, it's a best practice to
include your data fetching logic
0:59
within a container component like App.
1:04
You see, presentational components
like GifList and Gif should
1:07
not handle their own data fetching because
it tightly couples the data to the view.
1:12
The two should stay separate.
1:19
And as you'll soon learn,
this approach allows us to have
1:21
better reusability of
presentational components.
1:26
GifList will receive the data from App,
and
1:30
be responsible only for
how the list of Gifs looks.
1:33
Remember, in React props are how
components talk to each other.
1:37
So first, in App.js,
let's give GifList a prop of data.
1:43
And this prop needs to pass the Gif
state to the GifList component.
1:50
So inside the curly braces,
we'll write gifs.
1:55
Anytime the Gif state gets updated,
the GifList component
2:00
will receive an array of
objects via this data prop.
2:05
In fact, if you save our changes and
2:10
inspect the GifList
component in React DevTools,
2:13
you should see that the data
prop is passing it the data
2:17
array containing each Gif
object returned from the API.
2:22
So to display each Gif,
2:27
we'll need to map each of the Gif
objects to a Gif component.
2:29
Next, in GifList,
I'll store the data in a constant
2:35
named result and
will set it equal to props.data.
2:41
Then we can use the map method
to map over the array and
2:46
return a Gif component for
each object in the array.
2:50
So we'll store this function
in the variable Gifs and
2:56
set it equal to results.map.
3:00
Inside the map method,
the function takes the parameter gif,
3:03
and returns a Gif component.
3:08
So now, to get the URL of a Gif,
we'll need to access
3:12
the URL property associated
with each object in the array.
3:16
So back into React DevTools.
3:23
If you open up one of
the objects in the array,
3:25
you'll see a list of its properties.
3:28
I'll click on Image to open a list
of available image properties.
3:32
I'm gonna use fixed height, which
returns an image that's 200 pixels tall.
3:37
And I can access the URL for
an image with this URL property.
3:45
I'll copy the URL and
paste it in the address bar.
3:50
So you can see an example
of what it returns.
3:54
And as you can see, it's a voting Gif.
3:58
Cool, so
now let's pass the Gif component a prop.
4:01
We'll name it url.
4:05
To access and
return the URL property of each object,
4:06
pass it gif.images.fixed_height.url.
4:14
Let's save and head over to Gif.js.
4:20
So the Gif component is only
responsible for rendering an image
4:24
element wrapped in a list item for
each Gif returned from the API.
4:29
So we'll need to give the image
tag a source attribute.
4:34
Then set the value to props.url to receive
the data passed to it via the URL prop.
4:40
And finally, back in GifList,
4:47
let's render the list of Gifs
by adding the Gifs variable
4:50
inside the unordered list
within the JSX expression.
4:56
So we'll replace Gif tag with
a set of curly braces and
5:01
inside include the gifs variable.
5:06
Let's save and switch over to the browser,
and have a look.
5:11
All right,
we see our list of animated Gifs, so
5:14
we know that our code works great.
5:18
But if you check the console,
you'll see that React outputs a warning.
5:21
It says that each child in a list
should have a unique key prop.
5:26
To check the render method of GifList.
5:31
In the React basics course,
you learn that keys help React identify
5:35
which items get changed, added,
or removed from the DOM.
5:40
So React is asking us to specify
a unique key prop on each Gif
5:46
component to differentiate each
component from its siblings.
5:51
So let's add a key to each Gif by
giving the Gif component a key prop.
5:56
Now, most API's return a unique ID
you could use for the key values.
6:04
And if you check the data
prop in React DevTools,
6:10
you'll see that there's an ID property
that's mapped to a unique value.
6:14
So to access it,
we'll set the key value to gif.id.
6:20
Let's save the file and check the console.
6:26
And now the warning is gone, great So
6:29
the search field at the top
of the page doesn't work yet.
6:33
In the next video, you'll learn how
to add a search feature to the app.
6:37
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up