We now need to get our list of results down into each of our different results list components before
we start passing those down as props.
I just want to give you a quick reminder of what exactly is inside of this results variable.
So inside of my code or my search screen component I'm gonna add in a console log of results like so
remember any time our component is shown on the screen.
We're going to automatically initiate a search of the Yelp API so we should see one console log where
results is an empty array and then a second one where it has a ton of data inside of it.
So now I'll flip back go to my terminal and check out that console log.
YEP HERE IT IS RIGHT HERE.
SO THAT RESULTS variable is an array with a bunch of objects inside of it each object represents one
different business or restaurant.
I want to recall that inside of this object that represents a business.
There's a bunch of different useful properties one that we really care about is the price property the
price property is going to have a string that is some number of dollar signs.
Those dollar signs indicate how expensive a given restaurant is.
So we want to use that price property right there to decide how to group up all of our different restaurants
and show them either as cost effective bit pricier or big spender.
So at some point time we're going to have to write out some filtering logic or some grouping logic essentially
and we're going to want to group all of our search results depending upon that price.
Property now that starts to raise a really interesting question.
Let me show you what I mean.
The big question here is where should we write out all that grouping logic all that logic that's going
to look at our list of results divvy it up somehow and then show the appropriate list of results inside
of our different three components.
There's two different ways we can handle this and probably several more but there's probably two very
obvious ones so to write out this filtering logic we could write it all out inside of our search screen
so inside of search screen we would write out some filtering logic to find all the businesses with one
dollar sign two and three and then once we find those different lists we can pass them down to our results
list components.
So the first one might get all the results with one dollar sign and then all the results of two and
all then with three the other way we could approach this would be to just pass down the entire list
of results into each of our results list components.
In addition we could also pass in a second prop that says maybe to the first one please show all the
businesses or all the results with just one dollar sign.
So in this case we would add in some logic to our results list to decide exactly how to filter or what
set of results to show to the user now.
Either approach would definitely work.
I'm going to suggest however that maybe option number one is a little bit better.
Here's why.
Anytime we have a component called something like results list usually the thought is that this component
is going to take some amount of data and render everything inside there onto the screen so the implicit
or the kind of thinking is that this component is going to take some list of data and no matter what
every record we give it is going to somehow appear on the screen to the user so in general if we pass
summary of data into this component right here and it doesn't show every last object that would be kind
of surprising behavior to me it would mean that there's some kind of hidden configuration inside of
results list that controls exactly what set of objects it shows and what set it doesn't.
And that just makes understanding the results list a little bit more challenging.
So instead I think we should take option number one.
We should do all of our filtering and grouping logic inside of the search screen and then pass just
the relevant results to each instance of our component again you can take either approach either approaches
a hundred percent okay but I think this one just ultimately makes a little bit more sense.
Okay.
So let's start to write out some code to actually do all this grouping logic inside of our search screen
so back inside of a search screen.
I'm gonna delete that console log I just wrote out and I'm going to make a helper function called filter
results by price.
That's going to assist with this grouping task as an argument to this function I'm gonna pass in the
price that we're looking for.
So the idea here is that we're gonna call filter results by price three times each time we're gonna
pass in some argument that's going to tell this function what set of results we want to get back.
So ultimately price is going to be equal to one dollar sign or two or three like so it'll be our job
inside of here to inspect that price variable inspect the list of results we got back and then return
just the appropriate results so here's how we might do that.
We might say something like return results.
Dot filter and for every result inside of our results array we will ask ourselves if the results dot
price is equal to the price that we just passed in.
So if that's true right there we're going to return that inside of a new results set from this function
overall.
Now we can very easily use this function to pass down a customized set of results to each of our results
list components so on the first one I'll add in a prop called results.
So this is going to be the array of data that we want this component to show and its value is going
to come from filter results by price
and we want this first initial grouping to only show the one dollar sign restaurants then for the second
one we'll do something very similar so I'm just gonna copy paste it down.
But this one I want to show to dollar sign places and then the third one I'll have it show three dollar
sign places just as a quick side note here the Yelp API also technically goes up to for dollar signs.
But again we're just gonna worry about the one two and three dollar sign places okay.
So that should be it.
So now to actually test this out we can go over to results list we should be able to receive that new
prop of results and then I'll add in a new temporary text element and I'll just print out how many results
we got.
So I'll put results is results dot link like so so I would expect to see now three additional pieces
of text for each of our different results list components and each one should have a slightly different
number of results.
So I can say both these files and we're gonna very quickly see.
Okay.
There we go.
So we get five cost effective places forty one bit price here and one big spender.
Notice that we had overall 50 results but these only total up to 47.
So the remaining three results are for dollar sign places.
Again we're just not going to worry about those.
If you wanted to add in one more copy of results list and show the four dollar sign places feel free
to do so but I'm going to worry about showing these three groups okay.
So this is pretty good.
We've now got our title inside of results list and we've got the set of data that we want to show.
It's not the last thing we do is somehow build a list out of all these different objects that were being
passed in.
So let's start to take care of that in the next video.