How to Build a Custom Pagination Component in React? Pagination in React JS

hi everyone in this video we will create pagination in react.js so let's get started so first of all I have data in this Json file okay I have written a few records in this Json file so you can fetch data from the database are in API that depends on you okay but I have written locally in this file so first of all I will import I have imported the data file okay using this import statement and now I will display the data the first thing is to display the data on the screen so let's let's display the data that I will display the data in a table foreign [Music] name the theorem would be the image so after this let's come to the body section here I will map my data to map the data I will use map statement on the data okay and this data data dot map and also D also the index here we should have the table row and assign key to this index and here I will display the data that should be the D the data and let's import the bootstrap just for a little bit design I will assign a class name here table and hotels we need so now let's check how it looks like and the service is running so let's uh so ready this is d dot ID and also per name in email so let's check it now we have these records okay so now the first thing that we should do that create the variable the states okay for the current page okay the first thing would be the current page current page and Set current page I will use you state hook State hook that page is the first one with us okay it is the current page now how many records we would like to show on every page so we will like to show the uh Records third page is equal to for example pipe you would like to show five records on every page and this other variable would be that const last indexed last index last index means that for example in the first page we have the records from one to five in the second page we have from five to Tenth okay the tin is the are the ninth is the last index for us so we should have that one how to fix that for that we will just use current page multiply by records per page it means that for example we are in the second page where in the second phase 2 multiplied by 5 it is equal to 10 so the last index is that 10 for the second page and also we should have the first index for the first index is equal to the first index for the page for example in a second page with our first index would be six okay so for that what we should write we should write last index minus records for page the last index was 10th with us for the second page so thin multi minus 5 it means five the six will be the first index for the same for the second page and now we would like to pitch the records for every page okay we should fit the records five five records for every page so against records is equal to data dot slice we should use the slice method and first we will pass the first index and lastly last index okay the first indic and the last index data between these two indexes data will switch for us const and now how many cases we have so let's find it 10 pages okay how many pages we have is equal to make we should use made dot seal so the length of the data data dot length divided by record surface records take out square page when we divide it so it will give us the number of pages the last thing is that to pitch the number of pages for example we have five pages so we should have the one to five numbers is equal to so there are different ways to do it okay but the simple way that we would like to write that would be using array and we will ask it the in pages okay how many pages we have for example five pages and Pages plus one because that starts from 0 plus 1 and that Keys it will take the keys from one to five or six how many keys we have dot slice start from one so it was all about the variables that we have created so now we will use the concept here so first of all we will print the pagination numbers from 1 to how many we have so we will print those numbers so let's save so I will use now I will create a list and I will assign a class name good stuff class to this to design it pagination and here I will use the list the first slip would be let's assign a classmate to this page item let's create a link and assign this this will be the previous pickups let's assign a class name that would be page link okay so whenever we click on this where is it goes and click so we will call previous page this function we will call until by clicking this okay so now let's render our page numbers okay so let's create Li first of all first of all I will create that the page numbers this variable okay numbers just numbers numbers dot map and here we have the number and the index and let's print it so I have a list assign a class name to this that would be a page item and also the key key would be I the index and let's create a link here and that here I will print the in the number and let's assign classes here and the class name would be page item and also one thing else that first and click whenever we click on this so we should call a function change current page and also the if the current page was equal to here I will use the conditional statements here I will use conditional statement let's check it one minute so here I will write something like this to print the active one to display the active one okay here I will just page item and here I will use if the current age was equal to equal to with n with this number so what it should do it will print the class active otherwise nothing it will just show us the active one okay and we have printed this so now let's the next to the next one let's copy this for the next print it in the page item here we will find next and here we will call next next page and also we will print the data not all data just we will create these records okay the records that we slides three cards okay so first of all let's check how it looks like pre-page is not defined change current page next page is notified oh yeah these are not defined so I should first of all create the functions function next page and also the previous page previous how was that the name of that next page three page okay free page and also the change a current page should change for this we will pass the number okay we will use anonymous function I will pass the current number that we are clicking and that will pass this one to that okay change current page function change current page it will has that so yes we have created them now let's look at see we have this number so divided in Supply it the so let's check it page item page link okay it is Page link with us see it it looks like the first of all this is the active so now let's apply this concept here the previous page for previous okay Apple the current page was not equal to equal to with the first page okay first index first index what we should do we will assign the Set current page Set current page to the current page minus 1. and also for the next page paper the current page was not equal to equal to with the last index what we should do we will Set current page to current page Plus 1. and for this one we will just use it current page ID so now let's check it so first let's check second one see we have from 16 from 15 we have all 16 three cards okay so now let's next the in next we don't have any records foreign from the first page so we will fix the error by just it should be one if it was not equal to with one and also it was not equal to with 10 pages okay the last page so now let's see it here we have it now let's click next next next next in earthquake and also if we Face the previous see it is not going back so it was all about pagination in react.js so if you have liked the video please subscribe our YouTube channel for more and more informative videos thanks for watching

Channel: Code With Yousaf

Views: 47,557

Keywords: how to build a custom pagination component in react, react pagination, pagination in react js, pagination react, guide to react pagination, show data in multiple pages, react pagination component, react js pagination, react pagination with hooks, how to do pagination in react js, how to add pagination in react js, react pagination tutorial, react table pagination, react pagination with api call, pagination component in react js, pagination with react js, pagination

Id: MxXZCD0XF2k

Length: 14min 5sec (845 seconds)

Published: Thu Feb 02 2023