Simple React Pagination Using React Hooks

[Music] hello everyone and welcome back so today we are gonna create simple pagination with react from scratch and as you can see in here this is the final project and by the way i'm not adding any css for this project because i just want to focus on how to create this pagination and as you can see we under page one and if i click one nothing happen if i click two under page two if i click nine on the page nine ten we under bits then so this data right here is come from random user dot me slash api i put link description basically this link gives us five d different users and as you can see right here we have the first name and last name and the port number that's the data i showing right here all right so let's see how we create that so as you can see in here i have already generated react app you can use npx or yarn and let's start the app i'm using yarn by the way so i can just say yarn star okay it's done let's go to the browser this is react app by default and let's remove couple file in here i'm gonna remove the css and the logo and everything in here so let's deal with that we just have index and app in source folder so let's go to index i'm going to remove to css and report web files everything down here save so let's go to the app.js file and let's make that smaller i'm going to remove everything in here and just put diff and i'm going to give a h1 in here just say pagination demo and let's get rid of this everything up here like so and save now we should see h1 with pagination demo in the browser refresh and here we go the next thing is i'm going to fetch the data from the random user dot miss last api i'm going to copy that and in here let's use uh use effect because we are going to fetch the data inside a use effect and just make sure you import up here and in here you're going to paste in empty string that's mean everything inside the use effect right here will be running every time we refresh the browser that's what we need to fetch data all right so in here i want to create function just give a name fetch users set that equals to error function and that's running the fetch user function down here wait fetch users like so and inside in here i'm going to fetch data using axios so let's import axios i'm going to open a new terminal and let's say yarn add axios with excuse all right so it's done let's import axios up here we can say import axios from axios and we need to create a variable called a response set that equals to axios dot get and let's put the link right here and i just want to yeah i just want to say i think 08 in here sync oh wait wait and let's just console.log the response so now save let's take a look in the browser let's refresh and see in the console what we have um yeah we have the response and as you can see right here we have the data and the results we have five the different users okay so we can access the data right here by say res dot data dot wait dot results okay so we need to store this data which is this array right here into the state so i want to create state call users and set users so that equals to use state and just make sure you import i'm here and by default i just want to say empty array so done here we need to say set users so if i console.log users now we should see uh 5d different so refresh and here we go the first thing is we have empty array and then we get five the different users okay so far so good i'm going to create another state in here to say cons loading and set loading so that equals to use state by default just want to say false okay so in here before we get the response i want to set the loading into true and after we get the response i'm going to set the loading into false okay and then down here i'm going to use ternary operator so if loading is true i want to say paragraph in here just say loading like so else i want to use a react fragment and in here let's just say h1 data like so so now save and see if i refresh [Music] now we have loading and then data okay let's do that again we have loading and data okay cool so let's close the terminal and i'm going to create another folder in here let's just say components and i'm going to create file called users.js file and inside in here i want to create rfce which is functional best component so let's just put users so now save and now we need to import the user in here so import users from dots less with those lens components less users okay so let's put the users component in here so let's get rid of this h1 and put a user right here so now save now we should see loading and then user so now refresh um loading and then users okay cool so now we need to send this user right here which is 5d different user from the api we are going to send that into the users component so we can just say users so that equals to users from state which is right here okay and i'm gonna remove this console and i'm gonna create another state just call page and set page so that it was to use state set that equals to by default to say one because the meaning what page is if i click the one the page is one if i click two the page is two and by default the page is one okay so we need to send this thing right here into right here page so that equals to page four from the state okay so now save and let's go to users and in here we need to grab to users and pages if i console.log wait console.log the users and page now we should see 5t different users and then one so now let's wait refresh as you can see we have five different users and then we have one okay cool so let's create another folder inside of source i'm gonna create tools and inside until folder i'm going to create a file called constanceconstance.js and in here i'm going to export variable call user per page and just save five okay i'm going to showing five different user for each page so let's just copy this variable name and then forget to save and just close and go back to user.js file and in here i'm going to import wait wait import and just put the variable name and from because we need to go to outside the components folder let's go to until and then constants okay so if i console.logged user per page user we should get a five refresh and five okay so let's go back and in here in here i'm going to create variable call selected users so that equals to users dot slice before we put any parameter inside a slice i'm going to create variable called star index set that equals to page minus 1 and then times by user per page okay and we're going to put the star index into the first parameter and then for the second parameter it should be star index plus user weight user per page so what i mean about this is if we on the page one we know that page have a default value one right if we on the page one one minus one it should be zero zero times five it should be zero we know that if we on the page one start index should be zero and then everything in here it should be five okay if we on the page two two minus one it should be 1 1 times 5 should be 5. star index should be 5 and then everything in here it should be 10 okay so let's take a look at right here we have a users variable and this is array and i have variable called selected users and user.slice025 if i console.log the selected users this will be showing the user one until user five because they start from zero which is in here until five which is one two three four five if i run that now we have user one until user five okay if i change that to five until ten now this should be start from zero one two three four five start from user six into user ten let's take a look user 6 until user 10 okay that's what happening here okay so i hope that makes sense so i'm going to remove everything in here and just return selected users dot map and get for its user and i'm going to return the user component so let's create user component i'm going to create user.js and this should be a functional best component rfce and let's just put a user okay so now save and let's go back in here and let's import user from with from really from dot class users okay so now let's save and let's take a look refresh now we should have a five user okay cool so next we need to send this user into the user component so let's say user so that it goes to user okay so let's grab the user into the user component let's destructuring in here let's say user if i console.log the user we should see five different user let's refresh and see what we have and here we go we have five different user and we need to showing just uh first name and last name and port number okay so let's remove the console and inside it here i'm gonna give a hr and let's say paragraph and i'm going to use a backtick in here like so let's just say full name we need to grab the uh where's this name user dot name dot first space user dot name dot loss okay so if i save now we should get the full name for each user and here we go cool all right so now let's showing the phone number we can just copy and paste this should be pawn and user dot bone i believe let's get rid of this everything in here wait like so now save and bam and we have warning in here it's style in the list should have unique so let's go to the users and in here we should give a key in here let's just say key i'm going to access the key so i can say user dot login dot uuid okay so now save and the warning should be gone okay everything is clean now we are going to create the pagination down here so let's go back and i want to create a file called pagination wait pagination dot js and let's generate our rfce which is optional past component and let's just put a pagination pagination safe and let's go back into the app.js file and we need to import that up here so let's say import with import pagination from from really from those last components last pagination okay so let's put the pagination component in here like so so now if i save well now we should see a text pagination down here i'm not sure why it's not auto reload but it's okay as you can see we have pagination in here so next i'm going to add another state in here just give a name total pages and set total weight total pages so that equals to you state by default to say zero and then inside the fetch user function i'm going to set the total pages i'm going to use metal in here and i'm going to grab the respawn.data.results and dot lang we know that this is half a value 5t alright i'm going to divide it by user underscore per page we know that uses user r score per page have a value five so five t divided by five should be ten right if i console.log the total pages total pages we know that it should be have value 10 okay so let's refresh so we get a 0 and then 10 okay so next let's send the total pages into the pagination component so total pages set that equals to total pages and save let's go to the pagination component and i'm going to grab the total pages in here so the idea now is we are going to create array from 1 to 10 okay now we have this value which is 10. so we're going to create variable call pages so that goes to i'm going to create array and put the total pages inside in here and just say dot key like so okay so if i console.log the pages like so and refresh now as you can see we have empty array and then we have array with value zero until nine okay i want to the value is one to ten so we can just use dot map and then grab the number going to say num plus one okay if i save and let's go back in here and refresh now we should see one until 10 okay that's what we want so let's remove this so next let's maps through these pages inside the div right here i'm going to say pages dot map let's grab individual number and i'm going to return button inside in here and just showing the number okay if i save now we should see number from 1 to 10 down here let's see and here we go and we have some warning in here let's fix that let's go to inside the button right here i'm going to say key set it equals to number okay and i want to add even listener in here which is on click event so i can just say on click set that equals two i'm going to go back to app.js let's add function in here say cons handle click set that equals to arrow function and i'm going to set the page into wherever the number is okay so we need to grab to number in here let's send the handle click function in here okay let's do that right here and save let's go back to pagination and we need to grab to handle click and right here we need to run the handle click like so and we need to send the number which is number from here okay now if we click one the function in here running and set page should be one okay and then this page have a value one if i click two this page have a value two and so on so let's refresh so now if i click one we on the page one if i click two we under page two okay but i like to just add another uh information here so let's say in here let's say b tag i'm gonna say pages into let's say page and save now let's refresh so as you can see we under page one if i click one nothing happen if i click two page two if i click five watch page five click ten page ten all right so i think that's it for this project guys and hope you learned something new from this project and i'm gonna see you in a very next video bye

Channel: Cand Dev

Views: 7,056

Keywords:

Id: 8Gmi1NNPtB8

Length: 22min 4sec (1324 seconds)

Published: Wed Dec 02 2020