Hey Everyone, Hope you all doing great. In this post we're building pagination component from scratch in ReactJS. We're not going to use any library here. If you prefer to watch video then you can go through below video else keep reading...😄 Let's start by creating our react-app, npx create-react-app react-pagination-component Create a separate file, like PaginationComponent.js. Here, I'm using to get data and use pagination on that data. jsonplaceholder API This API will return us a list of todos. Now to store this data create one state and initialize it with an empty array. const [data, setData] = useState([]); Now let's use useEffect to set this state with our data which comes from API. }, []); useEffect( () => { fetch( "https://jsonplaceholder.typicode.com/todos" ) .then( ( response ) => response.json()) .then( ( json ) => setData(json)); if you want to see what type of data this api is providing then just go to url. this Also if you don't know how to fetch api in ReactJS you can watch my video on . How to fetch API let's create a small renderData component outside of our main component to render the "to-do" list. );
}; }, []); );
} import React, { useEffect, useState } from "react" ; import "./style.css" ; const renderData = ( data ) => { return ( < ul > {data.map((todo, index) => { return < li key = {index} > {todo.title} </ li > ; })} </ ul > function PaginationComponent ( ) { const [data, setData] = useState([]); useEffect( () => { fetch( "https://jsonplaceholder.typicode.com/todos" ) .then( ( response ) => response.json()) .then( ( json ) => setData(json)); return ( <> < h1 > Todo List </ h1 > < br /> {renderData(data)} </> export default PaginationComponent; In here I have mapped title of to-dos from data 
state. const renderData and Render with data state, inside the return. {renderData(data)} Now, let's create pagination from here. To do that we need two states, const [currentPage, setcurrentPage] = useState( 1 ); const [itemsPerPage, setitemsPerPage] = useState( 5 ); :- stores current page number, initially 0. currentPage :- stores no of items we want to display in 
 single page. Initially it is 5. itemsPerPage pages.push(i);
  } const pages = []; for ( let i = 1 ; i <= Math .ceil(data.length / itemsPerPage); i++) { In above code, pages array contains total number of pages like 1,2,3..upto (total data / itemsPerPage). If you have 20 items and you want to display 5 items per page then you will need 20/5 = 4 pages. Let's create render page number component which will display page numbers. );
}; }, []); }; );
    
  }); );
} import React, { useEffect, useState } from "react" ; import "./style.css" ; const renderData = ( data ) => { return ( < ul > {data.map((todo, index) => { return < li key = {index} > {todo.title} </ li > ; })} </ ul > function PaginationComponent ( ) { const [data, setData] = useState([]); useEffect( () => { fetch( "https://jsonplaceholder.typicode.com/todos" ) .then( ( response ) => response.json()) .then( ( json ) => setData(json)); const handleClick = ( event ) => { setcurrentPage( Number (event.target.id)); const renderPageNumbers = pages.map( ( number ) => { return ( < li key = {number} id = {number} onClick = {handleClick} className = {currentPage == number ? " active " : null } > {number} </ li > return ( <> < h1 > Todo List </ h1 > < br /> {renderData(data)} < ul className = "pageNumbers" > {renderPageNumbers} </ ul > </> export default PaginationComponent; As you can see after the handleClick method at , renderPageNumber I have mapped this pages array which will return an tag which display page numbers. This tag contains key, id, onClick method and className. li li Here className becomes active when you are on the same page as currentPage state. This method runs when we click on any page number and set currentPage state to selected page number. handleClick Now inside the return render component by wrapping it with tag and className as pageNumbers. renderPageNumbers ul For styling, you can refer css file. NOTE: this As you have observed, This page numbers are all over whole page and now we need to set limit to display this page numbers. To do that we need to define 3 more react states. const [pageNumberLimit, setpageNumberLimit] = useState( 5 ); const [maxPageNumberLimit, setmaxPageNumberLimit] = useState( 5 ); const [minPageNumberLimit, setminPageNumberLimit] = useState( 0 ); is to store how many page numbers you want to display. Here I want to display only 5. pageNumberLimit is to store max page bound limit. maxPageNumberLimit is to store min page bound limit. minPageNumberLimit Now modify component by putting if condition like given below, renderPageNumbers ); }
  }); const renderPageNumbers = pages.map( ( number ) => { if (number < maxPageNumberLimit + 1 && number > minPageNumberLimit) { return ( < li key = {number} id = {number} onClick = {handleClick} className = {currentPage == number ? " active " : null } > {number} </ li > } else { return null ; This if condition means that if current number is greater then maxPageNumberLimit+1 and less then then render it else render nothing. minPageNumberLimit As you run your code, you will see that there are only 5 page numbers displayed. Next we need next and previous buttons. Create those buttons around the component. {renderPageNumbers} Just like below, );
}; }, []); }; );
    
  }); setmaxPageNumberLimit(maxPageNumberLimit + pageNumberLimit);
      setminPageNumberLimit(minPageNumberLimit + pageNumberLimit);
    }
  }; setmaxPageNumberLimit(maxPageNumberLimit - pageNumberLimit);
      setminPageNumberLimit(minPageNumberLimit - pageNumberLimit);
    }
  }; );
} import React, { useEffect, useState } from "react" ; import "./style.css" ; const renderData = ( data ) => { return ( < ul > {data.map((todo, index) => { return < li key = {index} > {todo.title} </ li > ; })} </ ul > function PaginationComponent ( ) { const [data, setData] = useState([]); useEffect( () => { fetch( "https://jsonplaceholder.typicode.com/todos" ) .then( ( response ) => response.json()) .then( ( json ) => setData(json)); const handleClick = ( event ) => { setcurrentPage( Number (event.target.id)); const renderPageNumbers = pages.map( ( number ) => { return ( < li key = {number} id = {number} onClick = {handleClick} className = {currentPage == number ? " active " : null } > {number} </ li > const handleNextbtn = () => { setcurrentPage(currentPage + 1 ); if (currentPage + 1 > maxPageNumberLimit) { const handlePrevbtn = () => { setcurrentPage(currentPage - 1 ); if ((currentPage - 1 ) % pageNumberLimit == 0 ) { return ( <> < h1 > Todo List </ h1 > < br /> {renderData(data)} < ul className = "pageNumbers" > < li > < button onClick = {handlePrevbtn} disabled = {currentPage == pages[0] ? true : false } > Prev </ button > </ li > {renderPageNumbers} < li > < button onClick = {handleNextbtn} disabled = {currentPage == pages[pages.length - 1 ] ? true : false } > Next </ button > </ li > </ ul > </> export default PaginationComponent; There are two buttons and before and above the . prev next, {renderPageNumbers} In method for next button. In this method whenever user clicks on next button, it will set the current page state to plus 1. and check the condition if current page has not crossed maximum page number limit or not. If yes then it will reset this max and min page number limit with new limit. handleNextbtn In method for previous button. Only change is in the sign and in if condition. Suppose you are at page 6 and you want to go back to 5 then this condition will check that 6-1=5%5==0 so it will become true and it will reset max and min page number limits. handlePrevbtn Below code is to disable next button,we will disable next button when user is at last page. disabled={currentPage == pages[pages.length - 1 ] ? true : false } Below code is to disable Prev button, we will disable prev button when user is at 1st page. disabled={currentPage == pages[ 0 ] ? true : false } Now our Pagination component is Almost completed one thing left is to add those three dots which indicates that there are more pages then displayed. Let's create them. Above is the full code for this Tutorial. Just before the return I have created two buttons with hellip; which is unicode for ... There are two buttons pageIncrementBtn will render when page length is > maxPageNumberLimit.
 while pageDecrementBtn will render when minPageNumberLimit >= 1. Don't forget to render both of this ... buttons below and after the component. {renderPageNumbers} Now your whole Pagination component is completed. Watch above given video to know about one more pagination component which loads items vertically. Thanks For Reading.😄

Fetch

Target

Step by Step Guide to Create 3 Different Types of Loading Screens in React

How to Build a Hamburger Menu in ReactJS via Styled-Components

Checkout my new website🤩

Portfolio

Hire Me

Buy Me a Coffee

2021 - HackerNoon Contributor of the Year - REDUX

2021 - HackerNoon Contributor of the Year - CSS3

Too Long; Didn't Read

Make resilience your competitive advantage

ReactJS Pagination Tutorial: Building from Scratch

ReactJS Pagination Tutorial: Building from Scratch

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

A Tutorial for Todo Apps using React, Redux and Framer-Motion

The Noonification: Reduce Javascript: Master the Basics (1/11/2023)

The Noonification: Satoshi Might Be a Bitcoin ETF Skeptic (1/13/2024)

The Noonification: Small Puddle of Freedom (11/25/2022)

The Noonification: How to Use AI for Your B2B Marketing (11/11/2022)

A Tutorial for Todo Apps using React, Redux and Framer-Motion

The Noonification: Reduce Javascript: Master the Basics (1/11/2023)

The Noonification: Satoshi Might Be a Bitcoin ETF Skeptic (1/13/2024)

The Noonification: Small Puddle of Freedom (11/25/2022)

The Noonification: How to Use AI for Your B2B Marketing (11/11/2022)

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps