We're now showing our list of results to the user but unfortunately well we still need a lot of styling
to be applied.
Remember eventually we want to have something that looks like this right here.
So for each individual place or restaurant we want to show the image title stars and reviews.
Now in order to achieve that we could definitely add in a ton of J.S. X to this render item function
and return a giant block of J.S. X that shows that image name.
And so on.
However that would make our results list component start to get really bulky.
In particular we would have a ton of additional styling and J a sex inside of here that would be kind
of hard to read.
Finally if we add all that logic directly into results list we will never be able to show just one individual
result like just this thing right here to the user.
Currently our application doesn't really have that requirement but maybe at some point time we want
to show some like really interesting pick restaurant at the very top and we might want to show that
inside of just one single kind of restaurant thing like that right there.
So rather than stuffing all this additional J.S. sex into this render item function I think we should
create a separate helper or a separate reusable component that we can then show from our results list
so let's try giving that a shot.
We're gonna make a separate component that's going to be dedicated to just showing one individual result
by itself will then show that thing many times from inside of our flat list or more specifically from
the render item function so inside my components directory I'm going to make a new file where I'm going
to place this new reusable component.
I'm going to call it results detail dot J.S. so the idea here is that we're giving some details about
some very particular result then we'll put together our usual react component boilerplate inside of
here.
So we'll do it import react
I'll get view image because I think we need to show an image text and style sheet from React Native
I'll create my results detail and as usual for right now I'll return a View element that has a single
piece of text inside of it and all of the text say something like results.
Detail I'll then create my style object so can't styles is style sheet create.
And then finally export default results.
Detail OK so let's say this thing and we'll go back over to our results list file here's results list
I'm going to import that new component at the top so I'll import results detail from results detail
and then inside of our render item function rather than showing this simple text element I can replace
it with results detail.
So eventually we're gonna pass this thing a couple of props or more specifically probably the current
result that we're iterating over and then the results detail can use that piece of information to decide
how to customize itself.
So I gotta say this and we're gonna make sure that we can see results detail up here many times.
Yep definitely does.
So now we can pass down the current results that we are iterating over which incited the render item
function is item into our results detail.
So as usual I'm going to make up a new prop name because this is a component we are creating.
I think that using the name like results makes a lot of sense.
So that's going to be a prop called results.
We're gonna pass into it.
The item that we're currently iterating over is I'll save this file we can then flip back over the results
detail I will receive that prop called result and so result right here is going to be essentially my
business object.
It's gonna be that object that has all those different properties that we care about such as rating
price name image your l and so on.
So let's try once again to just print out the name of the business inside my text soulmate right here.
I will remove results detail and replace it with result dot name save this again.
Now it should be back to square one where we're just showing the name of the different restaurants we
fetched yet.
Looks pretty good.
OK.
So now that we've got this separate helper component we can start to customize it and add in a bunch
more sex and styling to get something that looks way closer to our original markup over here.
So let's start to add in all that styling in the next video.