For my React-News web part I created ‘pages’ that the user can click through. The web part breaks up all of the news posts into groups of three and displays them in that order. There is a lot happening behind the scene, however. Let’s see what’s going on!
The first thing to define is that in the state ( both SingleStyle.tsx and StackStyle.tsx share the same state ) we define the Next and Count properties for Pagination. We start the Next Property at three and increment by the next group of three- to keep track of how many news posts we’re passing and the Count is basically the Next property divided by three. The thing is however, there might be more news posts than evenly divisible by three; Say we have 11 news posts. If you do the math you know that 12 news posts would be 4 pages with 3 news posts each but this is one less. We can’t just throw out those two amazing news posts, however, so we create an extra page. This makes figuring out the logic for navigating backwards a little more complex. Note that in this blog I will be referencing both the Single Style and Stack Styles- these are both components in the web part and share the same Property and State interfaces and both share the
Check out the componentDidMount for either of the styles ( they’re both the same ) and look at what we do. We first set array, count, min, and max variables. What the min and max are for is to locate the first news posts that we want to render. These will be the first 3 news posts so we set the max to be equal to the minimum + 4. When we check to make sure we’re getting the right posts, we have to have less than 4 posts- 3 posts.
After we define the variables we go ahead and map through the News posts passed on from the parent react component, ReactNewsWebpart. How this works is in a different blog. Notice how we takes the count and increment it by one every time the mapping moves on to the next news post in the array. This essentially keeps track of how many news posts we have. Next, we have an if statement that checks to make sure we have less than 4 news posts in our array variable. If we’re not going over three posts, we add the current Post into the array variable. I admit the array variable is… very straight-to-the-point. After we’re done adding our three posts to the array variable we go ahead and do something with this information. We set the state of the RenderedNews to the array variable with our three news posts, count to be 1 because we’re on page 1, Next to be 3 ( 1st page ), and the UpdateCount to be 0. The update count is a helpful property but I won’t be going over it in this blog post.
Now that we have the initial posts set we can start tinkering with those fancy back and next buttons! Located inside the NavigationContainer in both the Single and Stack style components, we have our buttons and our page count.
Just by a quick glance at these buttons you can see that both of them have a disabled ternary. Obviously you shouldn’t be able to go back if you’re on the first page, there is nothing to go back to, so the back button is disabled when the Next State Property is 3. The next button is disabled when you’ve reached the last page. If the current state of Next ( say 9 because we increment by 3 ) is greater than or equal to how many news posts we have ( 8 ), then disable the next button.
The next part is the page number display. This is what page the user is currently on out of the pages there are. We don’t necessarily keep track of the length so we just take the length of the News array property, divide by three, and round up. The rounding up is done by the the Math.ceil function ( .ceil is a static method of Math ). We round up because sometimes you have more or less news posts than can be divisible by three.
Navigation Buttons
When the user clicks on the Next button we define the same variables as in the ComponentDidMount method. In this method we want to set the min variable to the current news post number so it will work dynamically.
Just like with the ComponentDidMount method we map through the News Posts and increase the count every new post.
Once we’ve mapped through each of the posts and added the next three posts to the variable array, we want to go and create a new value. We can’t just change the new posts and not keep track of the change, so we add 3 to our State property Next and 1 to Count. Additionally, we also set the RenderedNews to be the new array with the current news posts.
With our Back method we have the same variables with different values. For the min variable, since we’re going back we subtract instead of adding. You would think to just subtract 4 because that would be the opposite of the Next method but you have to go through both the current posts and the news posts you want to get.
Now, the trick with the max is to go back only 2. Like with the Next method, we want to have that extra space so we can get three news posts but we do this by taking three and subtracting one instead of adding. We then replace the State value Next with it’s current value subtracted by three and subtract 1 from the State value Count. We do this because we go back 3 news posts ( Next – 3 ), and we go back one page ( Count – 1 ).
Conclusion
Now you know how my web part’s pagination works! We used state and properties to get and display the right news posts and keep count. Add pagination to your web part to break up data or maybe experiment and let the user input how many posts to be in each page. Get crazy and have fun!
Graphgod 
Leave a Reply