ReactJS Pagination Tutorial using React Hooks

[Music] hey guys how's it going i'm back here with another video and before we actually get into the video um i wanted to show the end product so this is kind of what i'm going to be building you can see we have we're displaying a bunch of items in our screen as you can see and there's actually many different items that we're displaying however we're only showing 10 per page and if i want to see 10 more i can click on this it will go like show the next ones and if i click next it will go and show more if i click previous you can see everything is working we can move throughout the pages and this is basically an example of pagination so let's actually get into the video and yeah hey guys how's it going i'm back here with another video and today i decided to make a video where i'm going to teach you guys how to create kind of pagination and react so i'm going to be actually using a library called react paginate which i believe it is actually the best way of doing this because a lot of people wonder how to how to create this functionality in your application and i used to do it like on my own i used to manually create my my paginations however when i found out about react paginate i just thought it was like definitely a lot better than what i was doing so i would definitely recommend using this library because it helps you account for a lot of edge cases when you're trying to build pagination into your application and it is also a lot faster than just building it yourself so so this is basically what i'm gonna be doing in this video so you can see right here that we have this example project i have this kind of react application here which it's basically just a bunch of users and each user has a name like a first name a last name and an email right and currently we have 30 users so where did i get this users from well you can see here in my application i already have a bit of it built but this is just so you guys can see it um understand kind of the underlining of everything that i'm that we're going to be doing so basically i just downloaded this fake data over here you can see it's a json file um if you want to check it check out how to download fake data i'm going to leave a link in the description it is a website really cool where you can just download how many um like download different json files with data that is completely made up so that you can use as an as an example right so i downloaded here a thousand different examples of um users and each user contain contains a first name a last name and an email and also more but we're only going to be using those three items and this is the important part right imagine that we actually had here we're going i'm currently just i created a state called users as you can see and i'm just passing the array of users inside of here but since it is a thousand users i don't want to display a thousand users in the same page right currently i'm just displaying 30 but imagine if i wanted to display 500 um that's going to definitely slow down my computer you can see that now the scroll bar is like a lot smaller because it's a lot of users and we don't want to see all those users in the same page so one thing that we can do to fix this is create pagination so for this example we're only going to be actually using 50 users but we're going to paginate it into five different um pages because each page will display 10 users and this is basically where we're going to be starting from you can choose how many users or how many items you want per page but for now i'm just going to display it 50 and per page i'm going to display 10. so what is the first thing that we do well the first thing we actually have to do is we need to install the package so the package in order to be installed you can come over here i actually already installed it but if you want you just write yarn add react paginate like this or if you're using npm you can just write npm install react paginate and it will work you just wait for it to install and come back so now that the package has been installed we want to import this package into our application so i'm going to import a component so let's call it paginate from the react paginate library like this so now we have this component imported however we're gonna basically not touch this for now we're gonna build all the like the the back end not the the actual back end but like all the other stuff that we have to build before we actually show our pagination why because basically think about this all the logic behind which users you're displaying in the screen what what what like items you're displaying in the screen this is going to be done by us what react paginate does is it allows you to very easily create those buttons at the bottom where you can kind of like move from one page to another so as you saw from the example in the beginning that is exactly what we're going to be building so what do we do to get started with basically just distributing our users into different pages right we only want to display 10 users per page and so that means that if we have 50 users we're gonna have five buttons at the bottom right so five pages so how exactly do we do that well in order to do that we have to create another state and this is something that clearly like it demonstrates the the power of hooks in my opinion because every time i have to deal with something like this either for creating a an image slider like i have a tutorial on that already or creating a pagination you can simply do that by just creating for example a state that is going to hold the page number and let's create a function called set page number and this is going to be a state that isn't just a simple [Music] number right so use state and a number so zero so now that we have this this is basically just a state representing which page we're in and we're going to be changing it uh as we click on the buttons of our pagination right so now we start writing our logic what is the first piece of information that we actually need right we want to describe how many users we want per page right so let's for now create a state over here called users per page and i want to set it equal to 10 but you can set it equal to whatever you want i'm just going to set it equal to 10 and now we have to create a variable that is going to store kind of like the pages we've visited so far right that's the number of pages we've visited so far you can call it whatever you want i'm going to create a variable called pages visited and basically what this variable will be is equal to the current page number so we can just say it's equal to the page number times the users per page right because if we are in in um if we are in page four then each page has 10 items then that means that we are we have seen 40 users right so this is basically the idea and now comes the part where we actually decide which like which you like how many items we're going to display per page or what items we're going to display for per page so what do we do here well we're actually going to create a function which it's going to return uh like the users we're not going to write the the logic for mapping through the users over here but we're going to write it in a function and then we're going to call the function inside of our return statement right so what happens is we're going to come over here and let's create a function called display users display users and you can call it whatever you want depending on what your your project is about but basically what this this function will do is it will first of all slice through the users and when i say slices we're going to use the same function that i used here slice which we can choose how many like from which user to which user we're going to display right over here we're only displaying the first 50 users but um we're going to be changing this values over here as we go through um the pages right so we can just say users dot slice and here we have to pass the two variables that are going to be constantly changing and we're going to change the values for those variables as we go through the pagination right so the two variables that we want is first of all um the pages visited because for example imagine that we are in the fourth page right there's five pages fourth page means that we we have seen 40 users basically that means that we want to show the fifth page starting at the pages visited right so we want the pages visited to be the first element in the slice and then the second element will be just the pages visited plus the users per page because let's think about this again um we are in the fourth page right we're in the fourth page we basically want to display the items from 40 to 50 right so this means that 40 will be equal to pages visited because we've been to 40 items and 50 will be equal to pages visited which is 40 plus how many users we want to display per page which is 10 so that means 50 right and this is basically the logic behind displaying the users in each page and after we're done with this we want to basically just map through each item and for each item we're going to grab a user right because this is an array so each user contains as i showed before and as we did over here each user contains a first name a last name and an email so what i can do is i can just come over here and i'm going to grab an user and for each user i want to basically just write the same logic over here i just want to just return this kind of this div over here containing um an h3 a div this kind of stuff right so this over here is just a function which first slices through the correct users that we want to display and then it maps through those users and just display them in our screen so instead of showing this like we were doing before we can just come over here and actually just call the function so do it something like this display users and now this should actually show the correct users let's check to see if this is kind of working let's refresh our page um you can see that now despite showing like we're actually showing only 10 users right so one two three four five six seven eight nine yeah this is the correct 9 10 actually i forgot to count the last one but now we are actually just displaying 10 users which is exactly what we did and the reason why we're only displaying 10 users is because of this logic right here but this isn't all right we actually aren't seeing any of the buttons at the bottom which is actually the important part um traversing through all the pages that's the important part of pagination right so what do we do to fix that well we already have all of the different stuff that we need to kind of define before working with pagination so now what we can do is we can just implement our react paginate component into our application and it will do most of the work for us so to do that we're going to come over here and we're going to create we're going to call the react paginate um component so let's just create react paginate and let's save this and just put this like down here because we're going to basically just be writing stuff and actually want to delete this we're going to pass a bunch of different properties inside of our paginate component which comes already with the library i'm going to leave a link to the to kind of like the the documentations for this library in the description so if you want to check it out you can add more stuff than i'm going to add over here there's many things that you can do with it but i'm just going to write very simply a very simple example of how to work with pagination so the first thing that we want to do is we want to define the label for the previous button so as you saw in the beginning of the video um for pagination to like a pagination example usually have um the buttons for individual pages and then there's a button that you can click to go to the previous page and a button that you want to click to go to the next page so to do that we can just access the previous label um property and inside of here we can pass a string containing like the the label for the previous button right so i'm just actually going to write previous like this and then we can add the next label so for the next button so let's say the next label and let's just write next and then we want to basically just add the different properties that are going to determine which page we're in so the first property that we want to determine is the page count right so page count and this is actually something that i haven't we haven't done before and we haven't done before so this is something we're going to write right now so what exactly is the page count well we have to take into account um the actual current page right i know we say we are the the page number is where we are but however we have to account for cases in which for example 50 isn't the the like imagine this is 51 right so we can't divide 51 into 10 different pages like perfectly right into five different pages perfectly we would actually have to have six pages and the sixth page would have only one item so to account for that we actually have to create a variable here called page count count and we're gonna use a common uh library in in javascript called math which is going to allow us to just use the ceiling function and the ceiling function is very simple basically what it does is whatever we put inside of here if it is a decimal it's going to round up this is basically what we're doing if we wanted to round down we could use the floor function but ceiling is means we're rounding up so what we want to make this equal to is basically we're going to grab the users dot length and we want to divide it by how many users per page right so this is how we're going to determine how many pages we're going to have in our pagination right so we can just grab this and we can put it over here again if this is 51 we're going to round up we're going to divide this by 10 it's going to be 5.1 but we round up meaning we're going to have 6 instead of 5 right so let's actually make this 50 um 50 and now we just pass the page account and now he knows that it needs it needs five buttons so the next thing we have to pass is a function called on page change so this is basically a function that is going to be called whenever we click one of the buttons so it is important that we actually create an external function to handle this so i'm going to create a function called change page and we can very easily just come over here and create this function over here so the thing with it is is that it's actually going to be very simple it's just going to be a function that whenever we click on whenever we call it we're just going to set the page number equal to the next page right so the difference is that we're going to let um react paginate handle what is the next page right because it can be many many different things and the component itself knows like what is the next page it just wants to change the value of our state so what happens is when you pass this function over here the react paginate component contains an object called selected so what we can do is we can first of all destructure this object over here and now we have access to this variable and selected is actually the number for the page where we want to move to right so what we can do is we can just say set page number equal to selected and this will work we don't have to wonder what is the next page we don't have to increment or decrement our pages ourselves react paginate will do it like on its own right so this is all for the function and now this is basically all we can this will be working but we want to add some more um properties to this so that we can style our pagination a lot better right so the first thing that they allow us to to style is first of all pass a class name um for the container like the whole like the whole pagination buttons right the whole thing so what what is the name i want to pass is just pagination buttons now we can also create a class name for the previous link because this is something important so previously we can pass a class i'm just going to call it previous button maybe we want to style it i just want to show you guys all the different possibilities that we can have so we can also grab one for the next link and we can call this next link next button like this and what else can we do we can also access the disabled buttons so what what it means is basically when one of the buttons is disabled we can style it however we want so i'm going to call this pagination disabled and most importantly we can also access the active class name which basically represents the the the the styling for the button of the class of the page that we're currently in so we can just call it pagination active and now that this is done um you'll see that actually on our page this should be working right if i come over here you'll see that we have the buttons here at the bottom however they look horrible they don't even look like a button however if you look at this if i click on page two like the items change right if i click on page three they change if i click on the previous one they change i can just move through or towards them and it is clearly working right so it means that this is basically done the whole logic is done however now i'm just going to focus on the css so we can make this look a lot better right so the only things we have to do with the css is now that we have access to all of these different class names we can just come here to our css and start styling them individually so all the things that i did here was basically just to style our page initially so kind of like to display all of this at the center and i also styled the like each user but you don't have to do this we're just going to focus now on styling the buttons itself so what do we do well we want to access the pagination pagination buttons um class and what we do here is first of all i like to set the width equal to eighty percent so that if there's like a lot of buttons then we can reach like we can show many of them so eighty percent of the screen right and the height i just want to set it equal to 40 pixels because i think that 40 pixels is a nice height for buttons so we can just set it like this then i want to basically remove all the because you saw that we have bullet points right because it's currently like in the like when you look inside of the html item from the reactpagenet library they're apparently using lists here to create this so we can just set the list um style equal to none which will basically remove the bullet points and then what we want to do is we want to display this as flex so that this they appear like right next to each other and i also want to center everything so now if we take a look there you'll see that they're next to each other and they're currently at the center of our screen right so what else do we want to do well let's access the the link individually so each button isn't actually a button it is actually a link so it is an a tag and we can change them individually by first of all adding some padding so i want to add a padding of 10 pixels and also i also want to separate them from each other i want to make them be like 8 pixels apart and then i want to add a border radius so border radius and you guys will see why um it looks a lot better when you add a border radius it just looks a lot cleaner and obviously if you're adding a border radius we want to add a border so let's add a border which is one pixel solid and i want to add this color over here which is kind of like a blue color and if you want you just you can choose the color yourself but if you want this is the hexadecimal for this color and then the color of the text inside of it i also want it to be the same color as the border so it looks a lot cleaner and finally i want the cursor to be pointer because when i hover over it i want my cursor to change so let's take a look how it looks now you can see that it looks a lot better and when i hover over the button my cursor changes to to a pointer right so now that we have this done we just want to write the very last like small things that we want to add to our css so the first thing is i want to basically when i hover over the the link i also want um to change the background color to blue right so if i say pagination a hover i want to first of all set the color of the text equal to white and i also want to set the background color equal to the same color that we have over here because i like this kind of the this effect right so if i hover over this it kind of like inverts right so i just like how this looks and now what can we do well we can now access the pagination active which is the remember it is the the class that refers to the object that is currently active so what we can do is we can just say that when the item is active when when we are in page three for example the button for page three will be filled so for example if i come over here you can see i am in page three and this is the only button that is filled so if i go to page two now page two is filled with the the color page five you can see what happens right and we can move through the pages so this is basically it for the pagination tutorial if you have any questions please leave a comment down below and i'm happy to help um i know that pagination is a is a hard topic and building it on your own is is very like complicated just because of the logic you have to implement i think that using a library like react page date helps a lot so that's why i decided to make a video on using it so if you guys enjoyed it please leave a like down below and comment what you want to see next subscribe because i'm posting three times a week and i would really appreciate it and yeah hope you guys enjoyed it and i see you guys next time [Music]

Channel: PedroTech

Views: 104,356

Keywords: css, javascript, learn reactjs, mysql, react tutorial, reactjs, reactjs beginner, reactjs tutorial, typescript, react js crash course, react js, node js, express js, sequelize, pedrotech, traversy media, traversymedia, clever programmer, tech with tim, freecodecamp, deved, pagination, react pagination, react js pagination tutorial, reactjs pagination table, reactjs tutorial 2020, react hooks, react hooks tutorial, pagination javascript, pagination react, react-paginate example

Id: HANSMtDy508

Length: 22min 17sec (1337 seconds)

Published: Mon Jan 25 2021