Perfect.
We've got our whole list now let's spice things up and set up multiple pages and it's going to be step
by step process more.
First, I would want to go over the general idea.
Now we have the list of followers.
But what I would want is to display only a certain amount of followers at the time, whether or not
it's three or four or again, maybe five thousand, whatever you would want.
And the idea is somewhat simple.
Where we have the whole list, we have this one giant array.
But instead what I would want is an array of arrays.
So I have array of hundred items, but instead I would want all right.
Off, for example, 10 items.
But then each item is going to be the array of those 10 items.
Hopefully that makes sense where instead of one giant array, I'm going to have array of arrays.
And then, of course, as I'm clicking on the buttons, I'm just displaying a certain array in that
array of arrays.
So if I were one display array number four and of course our click on a button and now, of course,
I'm displaying forth.
All right.
And in that four, three, I have these items and not set this up, I'm going to have to navigate back
to our project.
And then remembering the utils, we have this Bagian eight function.
So first, I would want to import that pattern in my custom hook.
Now, I already have the input for the project and it's coming from the URLs.
So instead of simply going with Sadara, eventually we'll pipe our data through the Internet and instead
of retiring, this whole list will return array of.
All right.
Now, for the time being, I simply would want to invoke it and pass in the data and nothing is going
to happen.
Don't worry, we're still setting up some data with our whole data.
So we're going to go here with a unit that is my function name, of course, and then I pass in the
data, whatever.
I'm getting back from the server.
And then in order to see better what is happening, I'm just going to navigate back to my utils and
then more specifically, progenies, I need to name that argument.
So in there I had it as a data in here.
Just to be a bit more explicit, I'm going to go with followers and then if we cancel log, we should
see the same array of hundred items.
But of course, this catalog is coming from different places.
So we're going to go to inspect console.
You should see the same thing, array of items.
Or of course, now it is coming from the utils, unlike the first time when it was coming from the abcess.
And what's the plan?
Well, I have my data beautiful.
But what I would want to return from this function is not the whole list of hundred items or five thousand
items is array of arrays.
So some kind of array that splits up all those items and separate.
All right.
And first, we would need to decide how many items per page we would want.
So in here you can go with 500 or, you know, no, sorry, I'm overexaggerating don't go with five
hundred because our array is only 100 items long.
So I guess I don't know, Max probably go with 99, but probably it's going to be a bit more interesting
if you're going to go with ten, nine or something along those lines.
So in my case I could go with ten, but since there's something that I would want to showcase, I will
eventually change it tonight.
But for the time being, we're going to go with ten and we're going to set that up in the variable items
per page and again, come up with your own value.
But in my case, I'm going to start with 10.
So that is how many items I would want to showcase.
At one point as I'm clicking, I have that items displayed on screen.
OK, good.
Now, of course, we would need to calculate, well, how many pages do we have?
And in this case, I would want to divide the length of the followers of Meira that I'm passing in with
items per page.
Correct.
So we've got cons on that page and now we're going to go with followers and then that length.
So whatever MONAMI items that have divided by items per page and in this case, everything is going
to come out beautifully because we have round numbers.
If we count the log pages, we should have ten correct hundred divided by ten last time I checked.
Is that so?
If I can log in my staff, I should see ten.
And at the moment I don't see anything so.
Once I navigate to the star, I see my then and that is awesome.
However, what if we don't have round numbers?
What if I go with nine?
So I want to display nine items per page and then once I divide hundred by nine, what kind of value
I'm going to have on one have 11 dot and then one.
One, one, one one.
Now do you really have 11 pages and then point one or instead we would want to have round numbers.
And then since that one, one one represents that one last item that needs a separate page.
That's why I will use math ceiling and all the way around up.
So that way in the last page I'll just have those remaining items.
So we'll go here with Matt Ceiling and then we pass in the same values, so follower's the length divided
by items per page.
So in this case, you'll notice that will always round up.
In this case I have twelve pages.
So in that 12 page I'm just going to display remaining of the items.
So I have eleven pages, full pages with nine items per page.
And then in that 12 page I'm going to display that last item.
OK, that is good.
And of course I would want to create that array of arrows and for that I'm going to use array dot from.
So in here we're going to go with consed new followers.
So some kind of variable name and we're going to go with a dot from now.
All right.
That from a school because we can create arrays from the eatables or from the objects.
In this case I'm going to pass in brand new object.
Now the one thing that we need when we're setting up New Aurora is the length property in our object.
So in here I'm going to go with length property and I'm going to set it equal to my pages.
So now what I'm doing is I'm creating new array with that many items.
So in this case, I have 12.
So you'll notice that once you log in, you follow worse.
So you have a right of arrays and there's going to be 12 items.
Now, of course, all of them are undefined at the moment because we haven't set up the rest of functionality.
But it is already a good start where I have an array of arrays.
And now what I would want is every time I'm setting up this array of arrays in each item, I would want
to pull certain amount of items from my list.
So remember, I'm passing in the holders a list of hundred and then I would want to iterate over this
new followers.
And then in each iteration, depending on the index, I would want to set up first nine followers,
the next nine, next nine, and then all the way to 12 will pass in remaining all the followers.
And we do that by passing in the second argument here.
And we can access the item first, so just like with a map, we have a callback function and then the
first argument is that item, but we really don't care about this item because this is going to be undefined
anyway.
What I care about is the index.
And then as I'm iterating over, then whatever I'm going to be returning is going to be placed in that
item, which currently is undefined.
And I'm going to set up some kind of variable for start.
So I'm going to go with CONSED and then START is equal to index times and then we go with items per
page like so.
So the first time, of course, the index is going to be zero.
Correct.
Next iteration is going to be one and two.
And then every time I'm just going to multiply this by items per page.
So if you want to take a look at start value your cancela, you'll notice that the first time is going
to be zero, the nine, the nineteen twenty seven and all the way to ninety nine.
So that's our starting point.
That is the value that we'll use to pull out the followers from our main list.
And we'll do that by using another array method and that one is slice.
So in here I'm going to say return then follower's.
So this is my whole list.
OK, keep that in mind.
Not talking about new followers, talking about the whole list, and we go with slight method.
So what's the method is doing?
It is pulling out the items from the original array and setting up the new right.
Now, one thing we need to pass in is the starting point.
So where we would want to start grabbing the items and where we would want to end.
And this is where I pass in my start.
So my start position, which notes every time is changing, start with zero, then we'll go with nine,
18 and all that.
And then I just go with end position, which is not included.
And that is very important.
I go with start plus and then items per page.
So in the first iteration, the start is going to be what will it is zero.
Correct.
And what we're doing is we're pulling out follower's from our main list.
We start with zero and then we end with nine.
So our last index is going to be nine because we go start, which is zero plus nine and nine is not
included.
So essentially we will get items starting from index of zero all the way to eight.
And of course, that returns those nine items.
So now if you'll consider log the new followers, you'll notice that we're getting the array of arrays
every time we're iterating.
I'm just grabbing items from my main array.
I start with nine, then another nine and all the way to ninety nine.
And then I'm actually I have that last item again just to go over.
We set up how many items prepared you would want.
All changes.
Eleven.
What is going to happen is I'm going to have less pages.
So in this case I only have ten pages but of course I have different amount of items in a page, so
now I have eleven.
So that's when I said that you can change this value however you'd want.
The functionality still work.
Now, of course, don't set up five hundred items per page because of course we don't have five hundred
items in the list.
But if it's something reasonable within hundred and of course it is going to work.
So I'm going to go back to nine that we set up our pages.
So how many pages you will have?
And then we create array of arrays using array dot from method.
And then in here I pass an empty object with length property because that is what the array from requires
to create of that era.
And I set it equal to pages, whatever is that value, whether that is twelve, twenty or whatever.
And then as a second argument in array from I can pass in callback function that just iterate over my
right.
Now keep in mind I'm iterating over those twelve items, not the hundred.
And as I'm iterating I would want to use the slight method where I'm going to say, well grab from the
original list those items with starting point and point.
But since I would want to set up those values dynamically, I'm just going to use the index not to say,
well, get me the index of that page and then every time multiplied by items per page.
So that way my starting point is changing and also my endpoint.
So as I'm iterating, I'm just grabbing the values.
And then eventually I have my array of.
And what we would want to do is, of course, return that new followers.
So we're going to go here with new followers.
And now, of course, we'll have a ray of orange now, I can tell you right away that if you'll change
this around right away, our functionality will break.
That's why I will set up everything in the next video as far as displaying only one array right at the
time.
So only one page at a time.