Now that we've got the data inside of our results this component that we care about we can render it
all out inside of a flat list component.
Remember a flat list element is coming from React Native.
We use it anytime we want to show a scroll list of data to our user.
So inside of a results list at the very top I'll find my import statement from React Native and I'll
add in flat list like so then rather than showing this text element that prints out the number of results
we got to put down a flat list instead and then inside of here we'll throw in a couple of different
prompts.
First off I definitely want this list to render itself horizontally by default a flat list renders itself
vertically or top to bottom.
So to make sure that this thing shows our list of items from left to right we're gonna add in a prop
of course until equals true.
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
can shorten this up to just be the name of the prop like so that's 100 percent equivalent to writing
out equals true inside of a set of curly braces.
Next up we're going to pass in our list of data so that's give me data and that's coming from results
then remember we also have to add in that key extractor which is going to look at every item inside
of results for every object inside there and from every object we need to return some kind of stable
identifier.
Remember this is entirely a performance thing used to kind of behind the scenes by React Native.
So I'll add in my key extractor prop this is going to get a function that is called with every result
inside of results array and all we have to do inside of here is return a string that is somehow consistent
and not going to change between renders if we flip back over to our terminal and take another look at
our console log of that big list of objects you might notice that this thing has an I.D. property.
So every different business has an I.D. It is a string and it's consistent between renters.
So this I.D. property right here would be perfect to use as a key so from key extractor I will return
result dot I.D. And then finally we can define our render item function.
Remember that render item is just a little bit different than key extractor.
The first argument is going to have a couple of different properties assigned to it and the one that
we really care about here is the item property item is the actual object that we are currently iterating
over.
So item is gonna be technically equal to our result object or this kind of object that has all of our
restaurant data inside of it.
It's now inside render item.
We can return some amount of J.S. X that's gonna show this thing on the screen.
Once again for right now we'll just show a simple text element just to make sure we can successfully
show our list Soledad in a text element.
And I'm going to have inside there going to print out item dot name that should be the name of the restaurant.
We can take another look at this Jason object back over here just to make sure it does have a name property.
Yep definitely does okay.
So I think that should get us started.
It will e show our list of elements on the screen so I'll save this once again and there we go.
I've now got my list of restaurants being displayed.
Remember this is a horizontal list.
So if I tap really carefully I should be able to scroll through this list of items and see all the different
restaurants that I've fetched in my case remember that my cost effective only has like six or seven
results.
My big spender only has one in my bit price here has like forty one so a bit pricier in my case I can
scroll very far horizontally Well this definitely gets us started but.
Well the list doesn't look so great.
So let's take another quick pause here.
When we come back the next section we're going to start to do a lot of work on this render item function
and make sure that we return something that looks way closer to our original markup over here so quick
pause and we'll take care of that in the next video.