Amazing work now, of course, I would want to set up my buttons that control which page is displayed,
so which items I'm actually displaying and the way we're going to set this up is where we have the section,
the moment we have just one for the container.
However, right next to it, I would want to display my buttons.
And first I'll set up the button container, but then I'll show you why we would want to render that
conditionally.
So in here, we're going to go with B10 online class is container and for the time being, let's just
place a dummy value.
I'm just going to say hello world and everything is beautiful, but check it out.
When we're loading, you're also able to see the button container.
So if I go to the bigger browser window and for example, if I change the network and we're going to
go here with, I don't know, fast 3G, I think that should be good the moment I have this loading.
But I also have the hello world.
Now, what that means is that our display, my buttons even before I have the loading, and that's not
something that I would want.
Instead, I'm just going to say here conditionally that I only would want to display B10 container if
we are not loading now, since we have done that already quite a few times, I'm going to give you a
challenge.
So at the moment, pause the video and set it up how you would have that conditional rendering and then
once you're done, just double check with my solution.
So hopefully you were able to set it up and we simply say if we're not loading, only then I would want
to display my Bethanne container.
So I move this and to my unconditional surrender and then you'll check it out that I only have this
loading and then once I'm done loading the van, I have my buttons.
So that's what I would want to do.
I'm going to close this out and I'm going to refresh so we don't have that fast 3G and now, of course,
I would want to iterate over my data.
Please keep in mind we're not iterating over the file or worse, we're iterating over the whole length,
OK?
That is very important because this is that array of arrays.
And instead of showcasing nine buttons that just reflect that each item I would want to reference,
well, how many pages I have shown here.
If I have 20 pages, that's why I would want to display 20 items.
And then I remember this data that is that array of arrays.
OK, so hopefully that is clear and inside of this button container, like I said, I would want to
iterate over that list.
So we're going to say here data, then we're iterating over.
But I can tell you right away that we actually don't care about that.
Right.
Because remember, it is array of arrays and that each array represents some kind of page.
But I don't really care about those items.
What I care about is the index because that index will help me.
The change.
Well, which page actually rendering.
So I'm going to go with return.
And for the time being, let's just go with simple return with our button for key.
We just use the index and I'm going to go with class name buttons, class name page and then hyphen
between.
And as far as the value was just a button we save and we should see all of these buttons.
And again, the amount of buttons will depend on how many pages we have.
The more pages we have, the more buttons will have and less pages.
Hopefully you get the gist.
So now of course, I can display the buttons, but there's a few things that I would want to fix.
First of all, instead of this hardcoded button, I would want this.
Well, which page?
Actually, that button preferences and not do that.
Of course, I would want to look for my index.
Remember, I don't care about the item.
I don't care about array of arrays.
I don't care about that specific array in that array of ours.
But I care about the index of that.
All right.
That's why here, as far as the volume, I'm going to go with index.
Now, one small gotcha is that that way I'm going to get page zero.
Now, I don't think that makes sense, even though, of course, and our are zero index based.
But I think it would be a better setup if we would say, yeah, this is page number one.
How will we do that one?
Well, simply we go plus one and then we display page number one all the way to page number 12 in our
case.
So that's a good start.
And now, of course, I would want to set up a function that controls what which page I'm showing.
So followers from which page and I'm simply going to call this Handal page and handle page.
And as far as the logic, it's not going to be that challenging.
We're simply going to say Handal page.
We're going to be looking for the index that is coming forth from the button.
And then we're just going to go set page and then pass index.
Remember, by default, this is zero.
And then, of course, each page has its unique index.
So once we click on a button, we'll grab the index and then we'll pass it into a set page.
We scroll down a bit.
And now let's set up our logic, where, of course, once I click on a button on a part of that specific
index, so we'll go it on like no one is equal to my error function, of course, because I don't want
to invoke it right away.
And I'm going to go with Channel Page and then I'll pass in the index, whatever it is, whatever that
is, zero all the way to eleven in our.
So once I navigate to the bigger screen now check it out, we can click, but nothing is happening.
Interesting why nothing is happening.
Well, because even though we change the index at the moment, we're not re rendering anything because
we have to use the fact that once we said follower's equal to the page and that's it.
So even though the index is changing, we're not really setting it to a new page because here the dependency
already has just lowered.
And I can clearly show that where if we go to inspect and if we'll take a look at the component, notice
how these values are changing.
So, yeah, we're changing that index.
But for some reason, we are not getting that specific page and we simply fix that by adding one more
item in my dependency right where I have my user.
And I would want to run that user every time the page changes.
So when the page changes, of course, I'll check for loading first, which we're not loading anymore.
So this is going to be false.
And then I'll go set followers than have my whole list and then just display that certain list that
are right in that item.
Now, of course, these values will represent that page.
So in here, check it out once you click on the values changing.
And also you're displaying different items because now in that array of arrays, well, you're accessing
that specific array, whether that is a zero or one or two or whatever, and we're almost done with
our page buttons.
What is missing, though, is the active button.
So when I change the index, I also want to change, which is the active button, because I think that
would be a better user experience.
And we're simply going to do that by setting up the class name active and dynamically.
So initially we set this up as a simple string and now we're going to go back to Joske one and we're
going to say that, yes, we would want to always display the page button, but I'll have to set it
up to the template strength and we'll set up our expression where I'm going to say if index matches
my current page value, then I would want to add active B10 class dynamically.
So we're going to go with our ternary operator again and we're going to go with active B10 class and
we only added if the index matches the pages.
If not, then we simply return a no.
And what you'll notice that once we're allowed notice the button with index of zero course matches the
page.
Correct.
There's the page zero.
And as we're going to be changing this internal page, also, the class will move from one button to
another one.
You definitely want to see that in action.
Go to elements and main, then we're looking for followers, then button container and notice how the
first one has this active button.
So as I'm going to be clicking, then I'm going to be changing the value of the button that has the
active button.
So not only I'm turning the pages, I'm also displaying, well, which page I'm actually rendering.