1 00:00:01,100 --> 00:00:04,910 Now that we've got the data inside of our results this component that we care about we can render it 2 00:00:04,970 --> 00:00:07,840 all out inside of a flat list component. 3 00:00:07,880 --> 00:00:10,640 Remember a flat list element is coming from React Native. 4 00:00:10,640 --> 00:00:15,110 We use it anytime we want to show a scroll list of data to our user. 5 00:00:15,110 --> 00:00:19,640 So inside of a results list at the very top I'll find my import statement from React Native and I'll 6 00:00:19,640 --> 00:00:27,450 add in flat list like so then rather than showing this text element that prints out the number of results 7 00:00:27,450 --> 00:00:33,340 we got to put down a flat list instead and then inside of here we'll throw in a couple of different 8 00:00:33,340 --> 00:00:34,690 prompts. 9 00:00:34,720 --> 00:00:40,870 First off I definitely want this list to render itself horizontally by default a flat list renders itself 10 00:00:40,900 --> 00:00:42,710 vertically or top to bottom. 11 00:00:42,850 --> 00:00:47,110 So to make sure that this thing shows our list of items from left to right we're gonna add in a prop 12 00:00:47,110 --> 00:00:50,340 of course until equals true. 13 00:00:50,360 --> 00:00:55,010 Now when we're making use of Jess X if we ever have a prop that we're setting to a value of true we 14 00:00:55,010 --> 00:01:00,110 can shorten this up to just be the name of the prop like so that's 100 percent equivalent to writing 15 00:01:00,110 --> 00:01:04,840 out equals true inside of a set of curly braces. 16 00:01:04,840 --> 00:01:10,150 Next up we're going to pass in our list of data so that's give me data and that's coming from results 17 00:01:11,500 --> 00:01:15,940 then remember we also have to add in that key extractor which is going to look at every item inside 18 00:01:15,940 --> 00:01:21,130 of results for every object inside there and from every object we need to return some kind of stable 19 00:01:21,160 --> 00:01:22,300 identifier. 20 00:01:22,300 --> 00:01:28,350 Remember this is entirely a performance thing used to kind of behind the scenes by React Native. 21 00:01:28,750 --> 00:01:35,050 So I'll add in my key extractor prop this is going to get a function that is called with every result 22 00:01:35,080 --> 00:01:41,190 inside of results array and all we have to do inside of here is return a string that is somehow consistent 23 00:01:41,280 --> 00:01:46,200 and not going to change between renders if we flip back over to our terminal and take another look at 24 00:01:46,200 --> 00:01:52,260 our console log of that big list of objects you might notice that this thing has an I.D. property. 25 00:01:52,260 --> 00:01:58,160 So every different business has an I.D. It is a string and it's consistent between renters. 26 00:01:58,200 --> 00:02:05,670 So this I.D. property right here would be perfect to use as a key so from key extractor I will return 27 00:02:06,060 --> 00:02:14,600 result dot I.D. And then finally we can define our render item function. 28 00:02:14,740 --> 00:02:18,340 Remember that render item is just a little bit different than key extractor. 29 00:02:18,340 --> 00:02:22,360 The first argument is going to have a couple of different properties assigned to it and the one that 30 00:02:22,360 --> 00:02:29,470 we really care about here is the item property item is the actual object that we are currently iterating 31 00:02:29,500 --> 00:02:30,220 over. 32 00:02:30,340 --> 00:02:34,780 So item is gonna be technically equal to our result object or this kind of object that has all of our 33 00:02:34,780 --> 00:02:37,000 restaurant data inside of it. 34 00:02:37,140 --> 00:02:38,340 It's now inside render item. 35 00:02:38,360 --> 00:02:42,470 We can return some amount of J.S. X that's gonna show this thing on the screen. 36 00:02:42,770 --> 00:02:46,730 Once again for right now we'll just show a simple text element just to make sure we can successfully 37 00:02:46,730 --> 00:02:50,780 show our list Soledad in a text element. 38 00:02:50,780 --> 00:02:57,540 And I'm going to have inside there going to print out item dot name that should be the name of the restaurant. 39 00:02:57,950 --> 00:03:02,120 We can take another look at this Jason object back over here just to make sure it does have a name property. 40 00:03:02,180 --> 00:03:04,880 Yep definitely does okay. 41 00:03:04,880 --> 00:03:06,440 So I think that should get us started. 42 00:03:06,440 --> 00:03:12,550 It will e show our list of elements on the screen so I'll save this once again and there we go. 43 00:03:12,560 --> 00:03:15,320 I've now got my list of restaurants being displayed. 44 00:03:15,320 --> 00:03:17,370 Remember this is a horizontal list. 45 00:03:17,480 --> 00:03:23,120 So if I tap really carefully I should be able to scroll through this list of items and see all the different 46 00:03:23,120 --> 00:03:28,940 restaurants that I've fetched in my case remember that my cost effective only has like six or seven 47 00:03:28,940 --> 00:03:29,770 results. 48 00:03:29,780 --> 00:03:35,360 My big spender only has one in my bit price here has like forty one so a bit pricier in my case I can 49 00:03:35,360 --> 00:03:40,790 scroll very far horizontally Well this definitely gets us started but. 50 00:03:40,910 --> 00:03:42,900 Well the list doesn't look so great. 51 00:03:42,950 --> 00:03:44,580 So let's take another quick pause here. 52 00:03:44,630 --> 00:03:48,470 When we come back the next section we're going to start to do a lot of work on this render item function 53 00:03:48,820 --> 00:03:55,040 and make sure that we return something that looks way closer to our original markup over here so quick 54 00:03:55,040 --> 00:03:56,990 pause and we'll take care of that in the next video.