In this video we're going to start working on a new component that's going to show out a list of results
to our users.
Remember all three of these different lists right here are essentially identical.
Yeah.
There's a different title at the top of each one and they're going to show some data.
But at the end of the day they're really showing identical content or at least identically structured
content to a user.
So we're going to create one component that's going to be used three times to show each of these three
different lists.
To do so I'm going to flip back over into my editor inside my components directory.
I'm going to make a new file called results list dot J.S..
So the idea is that this component is going to be a reusable component.
That's going to show a list of results we got back from the Yelp API to get started.
We'll write out some J.S. X or a little bit of scaffolding for a typical react component.
So the top I will import react from react.
I'll get view text and style sheet from React Native and I think that's it.
I'll then create my component of results list and right now I'll return a view that has a piece of text
of results list then after that we'll create our style sheet.
So do a styles is style sheet.
Create.
And then finally an export default results list OK.
So let's now try to show three instances of this component inside of our search screen so flip back
over my search screen.
Here it is right here at the top.
I'm going to import
results list from up one directory components results list.
I'm also going to clean up that use effect function right here that we're not making use of inside this
file anymore okay.
So it looks good.
So now we can show three copies of results list down inside of our view after our text element.
And we're going to eventually delete that text element.
But for right now we'll just leave it to make sure we're still fetching our data.
I'm going to place results list and I'll duplicate it twice once and twice.
Now I've got three separate copies of results list again each one of these is going to be given some
number of results coming back from the Yelp API.
It's going to need to show that header and then render out the big list of results so we fetch.
And as a quick reminder this list is also supposed to be horizontally scalable.
So we have to figure out how to deal with that as well.
OK.
So if I pull back over to my application I can now see three copies of results list.
OK.
That wasn't so bad.
So let's keep going for right now without a doubt we're going to need to communicate some configuration
data from our search screen component down into each of these three different copies.
Remember anytime we communicate configuration data from a parent down to a child we refer to that as
using the prop system or essentially another term for it is passing props.
The first thing that we probably want to configure is the header text that each of these different sections
is going to show.
So the first one needs to be told to show the text cost effective and then bit pricier and then big
spender.
So let's try passing a prop from our search screen down into our results list that's going to tell the
results list what header text to show so on results list right here.
I'm going to make up a prop name.
Remember when it's a component that you and I create we make up the names of the props we want to use
on our own.
In this case a name or an appropriate name for that text right there might be something like header
or header text or title or something like that.
I think maybe the title makes some sense.
So I gonna pass in a title probably the first one will say cost effective
then the second one will be bit pricier and then the third one can be big spender like so.
So now inside of each of these different results list we're gonna have some bit of custom configuration.
Remember just adding in a prop is not enough.
However we have to now open up our results list component we need to receive that prop and then actually
show it on the screen somehow.
So I going to open up my results list once again remember and each time we pass a prop it's going to
show up inside of an object in that first argument to our component we can receive the entire props
object but usually we just structure out the different props we care about.
So in this case we care about a prop called title so I'm not going to show that title element inside
or that title text inside of our existing text tag.
So I'll delete results list and replace it with red curly braces because remember we are referencing
a javascript variable inside of Sanjay OSX and we'll print out title like so let's save this once again.
And now we'll see cost effective bit pricier and big spender.
Perfect.
Now the last thing we need to do for this titled text right here is add in a little bit of styling to
it.
So inside my style sheet I'm gonna add in a section called Title remember if you want to you can call
his title style.
I'm not being super consistent throughout this course and whether I call these different style properties.
Title title or titles title same title style.
It's solely up to you if you want to add that in there's not necessarily a strong community convention
one way or the other.
So first off I going to give this thing a fights slightly larger font size in this case of 18.
I'll give it a font weight which is going to make the font just look a little bit heavier of bold let's
try starting off with just those two properties.
Now apply that new style to my text element I'll do style is styles dot title I'll save that and Yep
I'd say it looks pretty good okay.
So we now have a good start to our results list.
So let's take a quick pause right here.
When we come back the next video we're going to start to pass in our list of different results to each
of these different components and start to render them out on the screen.