And this video will wire the app up to the give a result and display them as a list

of animated GIF, in our app the app component is the container responsible for

rendering the markup of the app as well as child components like gift list, in search

form and you'll learn more about the search form component in the next video.

So the GifList component as you'll see when you open up the file GifList.js,

contains the wrapping UL element

that will display our list of gifs via the gif component.

And the gif component is a presentational component containing the template

that displays each gif.

So the app component is aware of the application as a whole and

not only initializes and updates the gif state with the response data,

but it's also going to provide the data in behavior to its child components, and

react it's a best practice to include your data fetching logic within a container

component like app you see, presentational components like gift list and list should

not handle their own data fetching because it tightly couples the data to the view.

The two should stay separate.

And as you'll soon learn,

this approach allows us to have better reusability of presentational components.

So gift list will receive the data from app and be responsible only for

how the list of gifts looks.

Remember and react props are how components talk to each other.

So first app.jslLet's give GifList a prop of data.

And this prop needs to pass the good state to the GifList component.

So inside the curly braces will write this.state.gifs.

So now, any time the gift state gets updated, the GifList component,

will receive an array of objects, via the state of prop.

In fact if you save this, and spec the GifList component, in reactive tools.

You should see that the data prop, is passing it the data array containing

each gif object returned from the API so, to display each gif,

we need to map each of the GIF objects to a gif component.

Next in gif list address, I'll store the data and a constant named results

with const results equals pros.data.

Then we can use the map method to map over the array and return a gift component for

each object in the array.

So, we'll store this function in the variable gifs with let gifs

equals results.map and inside the map method,

the function takes the parameter gif and returns a gif component.

So, now to get the URL of a gif,

we'll need to access the URL property associated with each object in the array.

So, back in re Agg App tools, if you open up one of the objects here

in the array, you'll see its list of properties.

I'll click on images to open a list of all the available image properties.

And I'm going to use fix height, which returns an image that's 200

pixels tall and I can access the URL for an image with this URL property.

Now go ahead and copy this URL and paste it in the address bar so

you can see an example of what it returns.

And as you can see it's a fun and I made a gif of Betty White.

Cool, so now let's pass the gif component here.

A prop will name it url.

So now to access and return the url property of each object we'll pass

a gif.images.fixed_height.

.url.

I'll give this file a save and go over to get digest.

So the gif component is only responsible for rendering an image element

wrapped in a list item for each different turn from the API, so

will need to give the image tag a source attribute, then set

the value to props that url to receive the data passed to it via the url prop.

And finally back in GifList let's render the list of gifs

by adding the gifs variable inside the an ordered list within a Js sex expression.

So replace this get tagged with a set of curly braces and

inside include the gifs variable.

Let's give this file save and switch over to the browser and have a look.

Alright we see our list of animated gifs, so we know that our code works great but

if you check the console, you'll see that react

outputs a warning that says that each child and an array or

a iterator should have a unique key prop, check the render method of GifList.

Now in the react basics course, you learned that

keys help react identify which items get changed, added or removed from the dom.

So react is asking us to specify a unique key prop

on each gif component to differentiate each component from its siblings.

So let's add a key to each gif.

By giving the gif component a key prop.

Now most APIs return a unique ID you could use for key values, and

if you check the giphy sample response or open any of the objects in the gif state

you'll see that there is an ID property that's mapped to a unique value.

So to access it will set the key value to gif.id.

So, I'll save the file and check the consul.

And now the warning is gone, great.

So, the search field at the top of the page doesn't work just yet.

So, in the next video you'll learn how to add a search feature to the app.