Pagination in React using React Hooks

[Music] hi there let's create awesome pagination component from scratch as you can see here there are two types of pagination components first one with the next and previous buttons and page numbers while the second one is a simple button to load more in the first one it can work when you have multiple pages and items to render while the second one the load more button works when you want to render something vertically let's start with creating our project folder now open your command prompt set path to your folder and create react app using npx create react app and app name here i am writing a react pagination component and it's done creating our app change your directory to your app and start react server by typing npm start here i am using vs code as my daily code editor let's clean this app.js file here i want to keep classes and only change the header to do create components folder in src and create our component file called paginationcomponent.js and style.css file to put its css styling here i'm using react snippets to create a functional component remove this div here so that it converts into a react fragments just write pagination here and import our component into the app file it is working let's give it a title write a to-do list in h1 tag and it's working for this tutorial i am going to use this json placeholder api which is free and it will give us a list of todos let's just copy this fetch method code we need state to save this data and for that create one state called data using use date paste code that we have copied inside of the use effect as you can see in the console it is returning list of to-do's it is an area of objects and returning around 200 different toodles remove console.log and instead of that set data state with this json data let's create a small component to render this to-do list we will pass data and map that data to print to do title using li and ul tag call this render data component here just below the h1 tag and pass data state which contains list of to-do's and as you can see it is displaying the full list now let's start building our pagination component for that first we need two states first is a current page to store current page number and initialize it as a one second state is to store how much items you want to display per single page we want to display first 5 items create one array called pages this array will contain total numbers of pages like one two three fill this array using a loop where i equal to 1 to i equal to data dot length by items per page and push i into the pages array now this data.length is the total number of to-do's and by dividing it with the items we want to display in a single page we will get the total number of pages we need let's create a small component to render the page numbers here i will map pages array which will provide us a number for each page and then we will display these numbers in list manner don't forget to add id inside the ally tag render this component just before the render data and it's working we need some styling for this numbers render this component inside the ul and set its class name to page numbers let's write some css in style.css file don't forget to import this style.css file in our component now it looks good we need information regarding how many items we want in a single page and for that let's calculate index of last item in each page which will be the multiplication of current page and items per page suppose you want to display 10 items per page and on the third page there will be a 30th item so its index will be a third page into 10 items per page index of a first item will be the index of last item minus items per page now slice data for each page using index of a first and last items as you can see it's working let's add handleclick method for each number of pages in this handle click method we will set current page with id of a particular target which is a page number and it's working whenever i click on any page number items are changing let's add active class for active page number if current page is equals to a page number then add active class else do nothing add styling for active class now it looks good let's show limited page numbers instead of list of each page numbers and to do that we need to define three more states first one is a page number limit which means how many page numbers we want to display here i am keeping it to 5 next two states are max base page number limit and minimum page number limit which will be 5 and 0 initially now let's put a condition in a render page numbers if page number is less than a max page number limit plus 1 and page number is greater than minimum page number limit then return this number else return nothing as you can see here we have kept page number limit to 5 so it's only displaying a 5 page numbers let's add next and previous buttons add some style for this buttons now we need two on click methods for both of these buttons for the next button let's write handle next button method increment current page state to plus one whenever someone clicks it he goes to next page we also need to set max and minimum page number limit here whenever user cross max page number limit so put condition and set both of these values as you can see here now it's working great let's create a method for previous button copy the next button method and only change in this method will be in the if condition that current page -1 modulo page number limit is equals 0 then set states here this condition means that if you are going back from page 6 then 6 minus 1 equals 5 and 5 modulo page number limit which we have already set to a 5 which equals to 0 so then it will change max and minimum states and we can go back to previous pages it's working fine let's add those stipple dots so that user can understand that there are more pages available create a page increment button and render it based on a condition if length of pages is more than a max page number limit then render it as to nothing here help is the unicode to display triple dots in pages do same for the decrement button render both of these before and after the render page numbers as you can see both buttons are displayed there is an issue here that if you are at the first page and click on previous button then it will display zero page numbers and which will break the ui so for that we have to disable previous and next buttons on specific conditions disable previous button when current page is equals to the first page which is zeroth index of pages array for next button current page should equal to last page which will be the last index of pages array now it's working good let's create the second type of pagination create one button with the class load mode and add some styling to it create a handle load more method now in this method increase items per page state to plus 5. as you can see it's working i think i forgot to change condition in this decrement button that's why it is displayed before the first page sorry for that let's change it and it's done our pagination component is completed and working great that's it for this video give a thumbs up and subscribe because more awesome stuff is coming thanks for watching i can't remember who i am six

Channel: CodeBucks

Views: 49,666

Keywords: pagination in react js, pagination, react, reactjs, create pagination from scratch, reactjs pagination components, pagination using react hooks, custom pagination in react, how to do pagination in react js, react pagination codepen, pagination react hooks, react table pagination, react pagination example, add pagination in reactjs, react js pagination, pagination using react, build with react, reactjs conference, jsx, reactjs hooks, reactjs tutorial, reactjs developer

Id: 6DtBw3PaeHs

Length: 28min 46sec (1726 seconds)

Published: Tue Jan 05 2021