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
Start a free Courses trial
to watch this video
In this video, we'll wire the app up to the Giphy API results and display them as a list of animated GIFs.
Note
React Dev Tools has gone through some small changes since this video was made. It is now separated into two tabs: Components and Profiler.
In order to see what Guil shows in the lesson, click on the "Components" tab.
Resources
And this video will wire the app up to the
give a result and display them as a list
0:00
of animated GIF, in our app the app
component is the container responsible for
0:04
rendering the markup of the app as well as
child components like gift list, in search
0:09
form and you'll learn more about the
search form component in the next video.
0:14
So the GifList component as you'll see
when you open up the file GifList.js,
0:17
contains the wrapping UL element
0:22
that will display our list of
gifs via the gif component.
0:25
And the gif component is a presentational
component containing the template
0:29
that displays each gif.
0:33
So the app component is aware of
the application as a whole and
0:35
not only initializes and updates
the gif state with the response data,
0:40
but it's also going to provide the data
in behavior to its child components, and
0:45
react it's a best practice to include your
data fetching logic within a container
0:50
component like app you see, presentational
components like gift list and list should
0:54
not handle their own data fetching because
it tightly couples the data to the view.
1:00
The two should stay separate.
1:04
And as you'll soon learn,
1:06
this approach allows us to have better
reusability of presentational components.
1:07
So gift list will receive the data
from app and be responsible only for
1:12
how the list of gifts looks.
1:17
Remember and react props are how
components talk to each other.
1:19
So first app.jslLet's give
GifList a prop of data.
1:23
And this prop needs to pass the good
state to the GifList component.
1:29
So inside the curly braces
will write this.state.gifs.
1:35
So now, any time the gift state gets
updated, the GifList component,
1:42
will receive an array of objects,
via the state of prop.
1:47
In fact if you save this, and spec
the GifList component, in reactive tools.
1:51
You should see that the data prop,
is passing it the data array containing
1:59
each gif object returned from the API so,
to display each gif,
2:03
we need to map each of the GIF
objects to a gif component.
2:09
Next in gif list address, I'll store
the data and a constant named results
2:14
with const results equals pros.data.
2:20
Then we can use the map method to map over
the array and return a gift component for
2:27
each object in the array.
2:31
So, we'll store this function in
the variable gifs with let gifs
2:33
equals results.map and
inside the map method,
2:38
the function takes the parameter gif and
returns a gif component.
2:45
So, now to get the URL of a gif,
2:56
we'll need to access the URL property
associated with each object in the array.
2:58
So, back in re Agg App tools,
if you open up one of the objects here
3:02
in the array,
you'll see its list of properties.
3:07
I'll click on images to open a list of
all the available image properties.
3:11
And I'm going to use fix height,
which returns an image that's 200
3:16
pixels tall and I can access the URL for
an image with this URL property.
3:20
Now go ahead and copy this URL and
paste it in the address bar so
3:26
you can see an example of what it returns.
3:29
And as you can see it's a fun and
I made a gif of Betty White.
3:32
Cool, so
now let's pass the gif component here.
3:35
A prop will name it url.
3:39
So now to access and return the url
property of each object we'll pass
3:42
a gif.images.fixed_height.
3:46
.url.
3:52
I'll give this file a save and
go over to get digest.
3:55
So the gif component is only responsible
for rendering an image element
3:58
wrapped in a list item for
each different turn from the API, so
4:03
will need to give the image tag
a source attribute, then set
4:07
the value to props that url to receive
the data passed to it via the url prop.
4:12
And finally back in GifList
let's render the list of gifs
4:19
by adding the gifs variable inside the an
ordered list within a Js sex expression.
4:25
So replace this get tagged
with a set of curly braces and
4:30
inside include the gifs variable.
4:33
Let's give this file save and switch
over to the browser and have a look.
4:36
Alright we see our list of animated gifs,
so we know that our code works great but
4:40
if you check the console,
you'll see that react
4:46
outputs a warning that says
that each child and an array or
4:49
a iterator should have a unique key prop,
check the render method of GifList.
4:54
Now in the react basics course,
you learned that
4:59
keys help react identify which items get
changed, added or removed from the dom.
5:02
So react is asking us to
specify a unique key prop
5:07
on each gif component to differentiate
each component from its siblings.
5:11
So let's add a key to each gif.
5:14
By giving the gif component a key prop.
5:17
Now most APIs return a unique ID
you could use for key values, and
5:22
if you check the giphy sample response or
open any of the objects in the gif state
5:26
you'll see that there is an ID property
that's mapped to a unique value.
5:31
So to access it will set
the key value to gif.id.
5:36
So, I'll save the file and
check the consul.
5:41
And now the warning is gone, great.
5:44
So, the search field at the top of
the page doesn't work just yet.
5:47
So, in the next video you'll learn how
to add a search feature to the app.
5:50
You need to sign up for Treehouse in order to download course files.
Sign up