Awesome.
With our initial items displayed now we're going to set up the buttons so each and every time we're
going to click on a button.
Then of course we're going to display the next or the previous item in our array and then since it is
array of arrays then we're gonna display our next four items or I don't know our next three items whatever
items you have per page.
Now I also want to right away mention that I'm going to setup the condition where I'm only going to
display the buttons if I have more than one page.
How that is gonna look like.
Well if we refresh so I'm gonna start with zero and if I'm going to look for some kind of item where
I don't have more than one page you're going to see that we're not going to have buttons because let's
think about it.
If I have only four items or whatever items you have per page so if I see here that total product is
four and I only have one page.
What is the reason for buttons.
Why would you want to show the buttons.
Whether that's preview next or whatever different pages there are no different page.
The total amount of items matches the items that I have in one page.
So I'm just displaying the page.
That's why we're going to set up the condition where we only display the buttons that allow us to navigate
from page to page if there is more than one page how we can check that work and we can check that by
checking the saw it.
So the length of my array of arrays is bigger than one then I'm going to display the buttons.
If it's not well then we're not going to do anything.
So we're going to go door turn.
OK.
So we're turning now.
In this case again we do need to set up our fragment because there's going to be some adjacent stuff.
I'm going to go with product list.
We're going to close this out and then we're going to set up our condition where we're going to say
if sorted length length is bigger than one then I would want to display my buttons.
If it's not then I'm not going to do anything.
And the way we're going to set this up I'm going to go with article just because it's going to be a
little bit easier and I'm going to say.
And so if that is the case then display my article with my page ignition buttons.
If not then don't do anything.
We're gonna head back within our expression we're going to copy and paste and we can right away add
a class name just for the styling serve and call this pageant nation Virgin nation buttons.
Now there's gonna be a preview and next button.
So breathe.
And then just copy and paste and the next button.
But we're gonna add them after this one.
So first I just want to display the buttons and the way I'm going to work with the buttons.
I'm gonna check how big is my array.
How big is my sorted my arrays and array.
And then for each and every item I have within my right I'm going to return the button.
So here I'm going to say alright I'm going to have the expression sorted.
We're going to map over it and in this case again I really don't care about the actual item.
I don't care about that array so I'm going to have here underscore where I care about is the index.
So I'm gonna use this index of value to pass it in a button.
So then if I click on a button we're gonna change the page.
So we still have the map method.
Now what I would want to return as I'm iterating well a mapping over the array.
But like I said I don't care about the actual item.
It's not like I'm going or returning the product like I'm doing within the product list instead for
each and every item that I have.
That is of course my array of arrays items meaning this is gonna be I don't know array with four items.
The first one the second one the third one.
And how many we have.
And then for each and every item that I have within the array of arrays I'm going to go with the button.
Then we're gonna go with on click.
Now for the time being we're not going to set anything apart apart from simple placeholder where we're
just gonna go with console log and I would want to cancel out the change page.
So we're going to go the change page and index.
Remember within the context this is what we had we had the change page and we're just gonna be console
logging the index just so we can see what's happening.
So we have the button then we're gonna have also key prop because we're iterating over the list and
then we're turning the list.
So we need to pass in some kind of unique value.
And in this case I'm just going to pass in the next and the last one is gonna be the class name so we're
going to go with class name.
But it is going to be a bit more interesting where if again I'm going to go to all you're gonna note
as that once you click the actual page that we're displaying is displayed in the button.
So not only as I'm hovering over these buttons I'm actually changing this ISIS also the page that I'm
currently on.
So if this is the page number three then of course my styling is also a bit different.
That's why as I click notice we're adding different sources.
That's the reason why class name is going to be our expression.
I'm going to have a template string I mean say First there's gonna be page Button class.
So that's gonna be for all of them but then I would want to check whether the page matches the index
again page is gonna be whether at 0 or 1 or whatever value we're going to be changing.
So if the value for the page is going to match the index then I'm passing inform my button.
That means that I'm gonna be on the actual page and I'm going to say here if the page matches the index
then I would want to add one more class and that class is gonna be page Piti and current that just tells
me that the page value matches the index value which of course is for the button.
So Page B10 current.
Now I do want to place some value within the button.
So just to show you where just a simple index would fail.
I'm gonna pass it in but please keep in mind in the second we're going to update this a bit if we head
to a bigger screen what you're going to see.
Well first of all I can see that I have four buttons why I have four buttons because my array of arrows
the this one has four items.
So as we're iterating over our array I'm displaying the four buttons not step number one.
Then also the current button since the page is zero an index is zero for my button.
That's why my first page course does have the specific success as we're going to be clicking on it.
We don't have the functionality yet but of course we're going to change it around where we have the
functionality where as we're changing the page state value.
This also is going to change but you can see that it is probably not the best setup where we start our
pages with the zero.
Now technically we have to do it because our arrays are zero index based but that doesn't mean that
I cannot display something else.
I could say you know what index plus 1.
So that way I'm going to say all right I'm going I have a page number one on page number two three four.
Again why I have four pages because this is the amount of items I have.
If we're gonna had two helpers and if I'm going to say that I would want three items per page you're
clearly going to see I have more buttons why I have more buttons because again now we have items within
the array of arrays but each and every array has only three items instead of four.
And that's why I have more pages.
And that's why I have more buttons because I'm iterating more the array of arrays of sorted.
Now let's also take a look at the functionality because currently what happens if I click of course
nothing happens.
However within the console course we're going to see that we are displaying something.
This would be index number two.
Then this would be index number three because of course here we're displaying index plus one.
But the actual index is three.
So what do you think we need to do within our functionality.
Well it's actually very simple.
We have changed page and we're passing in the index so whatever index that button represents in my array
of arrays and what I would want is use set page that actually controls the state value to set it equal
to that particular index.
That's all we have to do.
So we're gonna go with set page and then pass in whatever index we are getting from my button we're
gonna head back and you're going to notice that if I click now I change the state value.
So now what is my page.
Well my page is gonna be one.
Don't look at the number two because of course that is index plus 1.
But the actual second button had the index in one so it changed the page value.
Now since I'm accessing within the page product sorted plus page now I'm displaying the second array
correct.
Since I clicked on a button then each and every time as I'm going to click on some kind of button this
is the item that I'm going to show.
Now just to give you another example if we head back to help us if I'm gonna go with two items let's
say I notice now I'm going to have more pages I'm gonna have eight pages.
So the last page is only going to have one item.
But again the functionality is exactly the same as I'm hovering.
I'm going to be changing the C assess.
But if the page so the number I'm setting with an index is gonna match the index that the button has.
And of course it shows that this is gonna be page number four.
Start with 0 9 2 and then whatever six seven all the way up to eight if we're gonna change at an all
the helpers to 10 you're going to see that I'm going to have ten items and then I only have two pages.
Why.
Because I had 15 items I click.
The second one is gonna have two items or I'm sorry five items but that is gonna be the page number
two.
Hopefully this makes sense I'm going to go back to four.
So displaying four items and now we're going to start working on next and pre buttons.
Hopefully this makes sense where we have our rate of arrays I'm displaying with how many pages I have.
And then each and every button gets the index.
And as we click on a button we just use the index that button has and change our page value where we
have within the product a number we had a page and set page.
Initially it was zero and then each and every time we click on a button we just use that page and then
we use the index that we're getting from the button and update our page state value.