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