Simple Frontend Pagination | React

[Music] this video is sponsored by the ultimate freelancing bundle by study web development comm which gives you everything you need to start your own freelancing business including 130 page in-depth guide invoicing and client proposal templates website templates an SEO checklist and much more visit the link in the description and use the code brad 25 to get 25% off hey what's going on guys so in the last video I got a comment that was pretty popular it was liked a bunch of times where they asked to do a video on pagination or pagination however you want to say it and it's kind of a tough subject because it's there's so many different ways to do it you know you have you have it where you can keep making requests to your server and you get a certain amount from the database or you can have front-end pagination which is what we're doing where you make an initial request for let's say a hundred different posts and then you create the functionality so you can have maybe five per page or ten per page so that's what we're going to be doing we're not going to be doing any server-side stuff but you can use this in a lot of different situations and this is a good way to do it if you're not if you don't have thousands and thousands of you know resources whatever it is posts or whatever if you have a hundred or so then this is a pretty good way to do it just within react you don't have to deal with any back-end stuff or anything like that so what we're gonna do is grab a bunch of posts this is Jason placeholder dot type a code comm I use this all the time it's a fake REST API and you can see right here if we click on posts we get a hundred different posts and my goal in this video is to make it so we can output these posts in our react application but make it so we can show five per page or ten per page and then have some nice you know pagination numbers at the bottom that we can scroll through and we're going to be using bootstrap for the styling all right so let's jump in I just have my create react app I did clean it up a little bit as you can see I just deleted some of the files have a simple app app component functional component we are going to be using hooks so we're not using classes or anything like that and then in my index.html you can see I just brought in bootstrap so that's pretty much it if you want to get up to speed I also installed Axios so that we can make our requests all right so let's start off in the app j/s I'm going to import Axios because the first thing I want to do is just get the posts okay so we'll bring that in now we're gonna be using a couple hooks so right here from react we're gonna bring in use state which just allows us to use state within a functional component and then use effect allows us to basically mimic some of the lifecycle methods within a class-based component and what we want to do is when the component mounts we want to fire off the request to get the posts so we'll use use effect for that so inside our app component above the return let's create our state values using use state so we're gonna go ahead and set posts and then we have what we do is we set a method to change that piece of state which we're going to call set posts and then we just set that to use state and then whatever we want as the default for posts which is going to be an empty array so it's just like having you know your state objects you know if you had posed empty array same thing except we don't have to call this dot set state and all that crap we just call set posts so hooks are really cool if you're interested in learning more I do have a course react front to back 20-19 that you know has a couple projects where we use this stuff so let's see we're also going to have loading since we're fetching data from an API let's say set loading and that's gonna be set to false by default now for the pagination we're gonna have a couple things in our state for that we're gonna have the current page call this set current page you state and the default is going to be one because we want to be on page one to begin with then we're going to have posts per page so how many do we want per our page and we'll set that to use state and let's do ten and you can easily change it after all right so we have our state now we want to make our request excuse me so we're going to use use effect and this takes in an arrow function now we could do Axios dot get and do dot then the standard promise syntax but I when you use a sink await now you can't put or you shouldn't put a sink on to use effect whatsoever so you want to create a new function so we're gonna say Kant's fetch posts equals a sink and in here we'll go ahead and first of all set loading to true because we're in the process of fetching and then we'll make our request put it into a response variable so let's do a weight Axio scott get and then the URL is gonna be this so we'll grab that and put that right in here okay then we're gonna set the posts to the response data so res dot data and then let's set loading seht loading back to false alright now we just created the function we have to call it so let's say fetch posts so fetch posts now the way you use effect works if you're not familiar with it it it runs whenever the component mounts what is this Oh mind it runs when the component mounts but it also runs whenever it updates and when this runs it's going to update the components so what will happen is it'll be a never-ending loop now to stop that we simply pass in an empty set of brackets okay this is where you would put dependencies where you know if you wanted it to run when something specific change you could put that in here but we're just gonna leave this blank which makes it kind of mimic the component did mount lifecycle method so it'll only run when it mounts which is what we want okay so now let's let's just let's console let's make sure we're getting these actually so we'll just do a console log of posts and if we go back to our application you can see that we're getting these posts right here yeah so it's a hundred posts I believe all right so let's try to think here we're gonna have a separate post component that we're gonna pass them into and then within that component we're gonna loop through so let's create a new folder and source called components and let's create post j/s all right so post j/s I have the I have the es7 react redux extension where I can just do our ACF that'll create an arrow function component and this is going to take in a couple props so I'm gonna D structure props and pull out posts and loading okay and we'll go right here and let's first make sure that it's done loading because you saw in the console log it had an empty array and then at the pose so we just want to make sure they're loaded so let's say if loading then let's just return will return in h2 and say loading or you could put a spinner or whatever you want and then down here let's do a a ul and we're using bootstrap so I'm just gonna add in a class name what's going on my typing class name of Lists group and also margin bottom four and then within here we're gonna loop through our posts that are passed in so posts dot map and we'll say for each post let's output an Li you have to give it a key since this is a list and our key will be the post dot ID and let's also give this a class name list group item and then within here we're just simply going to put the post title okay so that should be it for our post component now let's go back to AB js' and let's first of all change this we'll say let's say my blog but I want to make it look a little decent so I'll give us a class name of text primary and let's do margin bottom I will say margin bottom three I also want to push everything down a little so we'll do it margin top five for the container alright so we're going to insert posts now remember post takes in posts as a prop it also takes in loading like that alright so let's save post is not defined we didn't bring it in okay so now let's go back and there we go so we have a hundred posts which you know this it's too much we want to narrow this down and implement our pagination so we're gonna add some extra logic here and I'm gonna do it right above the return alright so we'll say get current pose and we're gonna have three lines of code here first thing we want to do is get the index of the last post so I'm going to call this index of last post and this is gonna be set to the current page and we're gonna multiply that by the post per page and that should give us the index of the last post now we want the index of first post and the way we get that is take the index of the last post and subtract the posts per page and then the last thing we want to do is get current posts and let's set that to this pote the state which is all the posts but we want to slice and then pass in the index of the first post and the index of the last post so that'll slice out the the number of posts that we want which should be 10 now instead of passing in posts that's in our state we're gonna go ahead and pass in current posts like that alright so if I save and we go back now we only get 10 posts ok and if we want to change this to 5 now we only get 5 ok so that part is done I'm going to change it back to 10 that parts done but we have no way to actually get to page 2 or 3 or any other page so that's where the pagination comes in now I want to create a separate component for it we could put everything in this file but that that's kind of messy so in components let's create a new file called pagination j/s and you can use this in all your projects you know just take this same code and and throw it in there I mean there's there's reactors pagination packages you can use you can install with NPM but you want to try to reduce the amount of packages that you have if you can do it yourself so let's do our ACF we'll create a functional component this is gonna take in a couple prop slips it's gonna take in a couple props it's gonna take in posts per page and total posts and then let's see we're gonna go right here and create a variable called page numbers which is gonna be at first just an empty array and then we're gonna do a for loop here and let's set let's set our index to one and then what we want to do is say if index is less than or equal to the total posts divided by the post per page but we want to round that up so we're going to wrap it in math dot seal and then total pose / post per page so the two props that were passed in and then of course we need to increment I and then in here we're just going to take the page numbers array and we're going to push on to it the index okay so those will get that'll give us the page numbers the correct amount of page numbers and then down here let's change this to a nav we're just gonna use some bootstrap markup I love a ul with the class of pagination and then we want to loop through the page numbers so page numbers dot map I'll say for each page number let's output in Li and we need to this is a list so we need to give this a key and for the key I'll just use the number because that's going to be unique and will give us a class name of page item just bootstraps and and then in here we'll have an a tag I'm just going to set it to exclamation number sign because we're gonna have a click event here and then let's give this a class name of page link again just bootstrap syntax and then in here we just want the number the page number all right so let's save that and now we just need to bring in pagination into our app j/s and we also need to pass this stuff in as props so let's go to app j s let's bring in pagination and down here let's say right below posts pagination and we want to pass in the posts per page and then we also want the total posts and we can get that simply by taking the posts that we get from the API and just getting the length all right so let's save that let's go back and there we go so if I click if I click nothing notice that nothing's happening we haven't added that yet but we're getting the correct number of pages here if I change the post per page to 5 we should get more numbers if we go down now we have 20 different numbers so it's going to give you the correct amount all right but I'm gonna change it back to 10 so the last thing we have to do is make it actually change the page so back in our pagination j/s we're gonna have in an on click right here and i'm gonna have this lets pass in an arrow function here and then we're going to call a paginate method and I'm gonna pass in the page number now this is gonna get called as a prop we're gonna pass in paginate as a prop so up here we need to say paginate all right so we'll save that and then back in app J s we need to add that as a prop so paginate oh hi can I spell this paginate and then when when that's clicked whatever we put in here is gonna happen and we're gonna call another method in this file called paginate okay our function so let's put this right here I'll just say change page say cons paginate and this is actually gonna be very very simple we're just gonna call set current page and we're gonna pass in page number now this page number is just coming from this right here I called it number here because it's we called it number here so we're passing that in as an arguments and we're catching it actually we need to pass that in here okay so that should work let's save it and we're actually not using the set post per page right here so we can actually get rid of that okay so let's go back to our browser here and if I click on - you can see it changes three shows us the next ten and there we go and if you change your post per page then this this will adapt and it'll work so that's pretty simple implementation of pagination I might do another video where we do some kind of full stack you know dealing with serving a certain amount of resources through the database from the back end but this is a nice and simple way to do it when you're dealing with an API where you're not getting thousands and thousands of resources alright so hopefully you guys like this if you did please leave a like and I'll see you next time hey guys one of the best if not the best resource I can refer you to for starting a freelance business is at study web development comm slash freelancing the creator Kyle shared it with me and I can personally vouch that this bundle is well worth it you get 130 page guide to freelancing and it comes with things like invoice templates client proposals HTML and CSS templates a portfolio website access to a private Facebook community and much more so use the code Brad 25 to get 25% off today

Channel: Traversy Media

Views: 232,916

Rating: 4.9575686 out of 5

Keywords: pagination, react, react pagination

Id: IYCa1F-OWmk

Length: 19min 13sec (1153 seconds)

Published: Sun Jun 23 2019