Beautiful, and with this in place now, let's set up the button container.
And in this video, we will rely on a radar from functionality.
So if you need a refresher, please reference this video from the jazz nuggets.
And basically, my idea is like this, where at the moment I have a number of pages, which is a number
and I want to use a report from to create an array from that and then we'll iterate over that right
inside of the button container and then we'll display the active button by checking whether the page
number, which will reflect that page, is equal to the current page, which in our case is always going
to be one for time being.
But eventually, yes, this will be dynamic as well.
So let's try doing that where we want to go back to the page, the container.
We have a number of pages.
And first, let's create that.
The right, the buttons are right where I'm going to go with const.
And let's call this pages.
Let's use a right up front and inside of the array, not from we can in the object with a length property,
and that one will be set equal to number of pages.
And as a result, we're getting back array in there.
We have items equal to whatever is the value.
So if this is done, then we'll have 10 items.
Not all of them will be undefined.
And you can definitely check it out by console.log, but I'm not going to do that.
And therefore we will do another thing where there's an option to pass in the callback function and
then instead of the callback function, we can access the item, which we're actually not interested.
That's why we'll go here with honor score.
And then we also can get the indexing and using the index.
Whatever we return from, this callback function will be placed over here inside of the pages.
Now, since pages start with one, not zero.
And since we know that in JavaScript, the arrays are zero index based when I want to return from this
callback function is index plus one.
And now I can log the pages and what you'll see.
Is that it will reflect how many pages we have so notice over here, so I have eight pages and I'll
display eventually eight buttons.
So now let's go to our container, so let's keep scrolling here where we have the buttons.
And now let's iterate over back.
Right?
Let me set up my expression.
I'll say Pages map.
So we're iterating over three pages.
Okay?
And then in order to access each and every item, I'm going to say page.
And then, no, that essentially is going to be the name for my item.
Then let's set up the return and then for every item.
This is what I want in return, a button first.
Let's add right away also a tie button, so type is equal to a button.
And as far as the text and side of the button, all that will be equal to a page number.
So it will be one.
And then all the way through, I got to work and navigate here.
Notice I'm displaying my buttons now.
We have some warnings and all that.
Don't worry about it.
So the moment I can clearly see my buttons.
Now there's no functionality, but that is still coming up.
So what's next?
Well, let's also add here a collapsed name, but this one will be dynamic where essentially I want
to check if the page that I have in a state which again at the moment is going to be one.
We haven't set up the functionality that changes that value, but eventually will.
And if it is equal to the page number, so the number we're displaying, then we'll set up that button
to be active.
If not, then it's just going to have a page VTM class.
And the way we do that, we go with page number is equal to.
So if it is equal to a page, then let's go with two courses page at the end as well as the actor one.
If it's not, then let's just go with page, began page and then biktima.
And we also want to set up here the key because we have a list, and for that one, we'll just use the
page number, which again is going to be starting with one and then whatever amount of the pages.
So let's go here, Ricky and page and number.
And lastly, once we click on a button for time being, we'll just log, but eventually there's going
to be a functionality as well.
So it's passing the function because we want to invoke it once we click here and let's just say here,
counsel log and change page.
So let's save that one.
And what we should see is reverse where for every page, we have the button again, the moment.
This will always be active.
The first one, because that matches the state one, but the menu will change that one as well.
And then if you click on any of them, you'll notice in the log We have change branch.
And if I'm going to go and search for some kind of job now, I have one.
Notice how we dynamically set up only two pages and we already know that if there's going to be only
one page as far as the number of pages, then we won't display the button container all together.