Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Data Fetching in React!
You have completed Data Fetching in React!
Preview
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