With our pageant functionality in place pick whichever method you prefer.
Whether you prefer splice or whether you prefer slice and then instead of returning the products which
of course was our origin.
All right.
Now to return new product I'm going to remove the console log and of course I'm going to say new products
and I can tell you right away that our application is going to break.
So I'm going to say it and we're gonna have a big factor.
Now what's saving us is of course that we use the prop types.
Remember we used the prop types and default props but if you check it out on a bigger screen you're
clearly going to see that which is going to have some default title with zero as well as default image.
Now we need to fix that.
So in order to do that we're going to had to page product and now let's take a look at what we're getting
back assorted and we should already know that.
Of course we're getting our array of arrays.
So we're going to go log on.
So right.
And don't worry about these warnings here and console.
It doesn't really matter.
We're going to fix it in a second.
And up on the top you can see that initially it is an empty array and then I have my arrays offering.
Now remember also that within the product list what we're doing and let's just jog our memory.
We have product list we're getting our products and then we just iterate over our product.
Okay then for each and every iteration we return the product component.
So in order to fix that of course since I have the array of arrays where I have the page product instead
of passing in sorted and then just pass it as an array we're going to pass it in whatever item we would
want.
Remember we have the array of arrays.
So we have sorted 0 sorted one sorted three or whatever up to whatever number we would want in our items.
So in this case since I have four items I'm going to zero one two and then three.
And since I would want to first display my first four items I'm gonna pass here zero.
Now I could pass Zero but also remember that we had a page that was the State Bar and the value for
the page was also zero.
So in this case we're going to make this interesting where I will say Get me sorted and then passing
the first item so array of four items.
So instead of passing in the whole sorted I'm just passing in the first array within my sword since
sort of right now is our average.
And when you do that your application completely breaks and you're like okay what on earth is happening
now let's think about it.
What is sorted.
Initially it is an empty array.
So if that passing sorted and then look for zero indexed item what I'm getting there.
Well what react is complaining is that well you can't iterate over nothing because essentially initially
it is an empty array.
And then of course if I'm accessing empty array and then zero in next based item within that empty array
of course it fails.
So in this case we're going to have to do a bit differently where we do the checking where I'm going
to say if sorted page is undefined which initially is the case by the way you can do it here and say
sorted page and you're going to see that initial value is gonna be undefined because again initially
it is an empty array then we would want to display some kind of text that I don't know we haven't gotten
our items yet.
And then if the actual sorted page is defined already.
So it is already array of arrays then we're going to use of course our product list.
Now also keep in mind that where we have the products context technically you could set this up array
of arrays technically that would save you.
Now in my case though if we're using filters anyway there's gonna be cases where I would just want to
show you that we don't get any items right.
So if I'm going to go with computer then I notice how computer and then zero to three hundred.
Unfortunately your search query did not return any product.
So this is what I would want to show initially when we're still loading up the products of course after
the loading has been displayed and all that and planning for searching for something then we're going
to have unfortunately your search query did not return any product.
So with all this being said where we have the page product instead of just returning the product list
we're going to set up our if state where I'm going to say if if sorted page is undefined then we're
going to return one thing and if it is defined then we're going to return our list.
So let's move this up like so and then we're going to write else.
So if it is defined I'm sorry if it is undefined then I would want to return my texts.
So I'm going to go with else return adding three.
And then here we're going to have some class name just for styling search errors and then as a text
we're going to write unfortunately not Lee and then we have your search query did not return any products.
So essentially what I'm trying to do here is shoot two birds with one stone where this of course is
gonna be displayed where we're using the filters.
But I'm just checking here.
I'm saying okay if salt pages undefined which initially is gonna be undefined and just show this guy
but you honestly this is mostly going to show only if we cannot find our filters.
But then of course if everything is fine once we have loaded the product once we have run through the
pageant function then we're going to display our product.
So I'm going to remove the console log on like so and then if we're going to head back to our project
we're looking for.
Notice how I'm displaying four items.
Now also notice that of course the reason why I'm doing that is because I'm accessing my item with a
zero index.
If we're gonna head back to products and if we're going to change the initial value for the page then
I'm going to of course show different products correct each and every time we're going to change the
product.
And this is essentially how we're gonna do our functionality where we have a state value.
And then of course we have that page and then we have our function.
We have change page which currently is just displaying whatever index.
But once we're gonna set up our buttons once we control this value there's zero right now then we're
going to be displaying different pages.
So initially we're just showing the items that are within the zero index then I don't know one and then
two and whatever items we have in disarray and as you can see our initial setup finally works where
we're not displaying all the items instead since we have array of arrays displaying the items that are
sitting within the array that has a zero index within my new sorted array.