React : Make your own pagination
Tags: react
Published: 2020-09-13 17:25:30

hello community,

today i'll show you how to make your own pagination without using any package.

## let's get started

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/f1ya3oft9w0n3svivr65.jpg)

first thing we need to do is to create a react app 
```
npx create-react-app make-pagination
cd make-pagination //navigate to our project
code . //open our react app with vscode
```
let's say that we want to fetch the data of our users and for that 
i'll use [Mockaroo](https://www.mockaroo.com/) to generate a dummy data.
in src folder we create a new file `data.js` this file will contain the users dummy data.
```javascript
//data.js
export const Data = [
{"id":1,"name":"Anna-maria","email":"ajehaes0@vinaora.com"},
{"id":2,"name":"Kenyon","email":"kvarfalameev1@wikimedia.org"},
{"id":3,"name":"Twila","email":"tkelby2@amazon.com"},
{"id":4,"name":"Rudd","email":"rcatling3@about.me"},
{"id":5,"name":"Robby","email":"rbenini4@behance.net"},
{"id":6,"name":"Viviyan","email":"vcurlis5@addtoany.com"},
{"id":7,"name":"Gabriello","email":"gdaines6@purevolume.com"},
{"id":8,"name":"Carter","email":"ckoubek7@wikipedia.org"},
{"id":9,"name":"Berna","email":"bdimatteo8@umich.edu"},
{"id":10,"name":"Marlow","email":"mhedditch9@usda.gov"},
{"id":11,"name":"Corella","email":"cdiperausa@newsvine.com"},
{"id":12,"name":"Cherida","email":"cstarkieb@vk.com"},
{"id":13,"name":"Zackariah","email":"zbathoc@cam.ac.uk"},
{"id":14,"name":"Orelee","email":"ogabitsd@msu.edu"},
{"id":15,"name":"Alonzo","email":"aclaire@fc2.com"},
{"id":16,"name":"Vonnie","email":"vkillbyf@cornell.edu"},
{"id":17,"name":"Weidar","email":"wdeyesg@whitehouse.gov"},
{"id":18,"name":"Cyb","email":"cternouthh@surveymonkey.com"},
{"id":19,"name":"Melisent","email":"modayi@loc.gov"},
{"id":20,"name":"Darbee","email":"djanecekj@stumbleupon.com"}
]
```
now let's fetch these users without pagination 
first we create a "user" folder then we create two files `user.jsx` component and `user.css` cuz we need some basic css style.

```javascript
//user.jsx
import React from 'react';
import './user.css';

const User = ({name, email}) => {
    return ( 
        <div className='user'>
            Name : {name} <br/>
            Email : {email}
        </div>
     );
}

export default User;
```
```css
/* user.css */
.user{
    padding: 10px;
    margin:10px auto;
    width:50%;
    border : 1px solid #eee;
}
```
in the "App.js" component we import `user.jsx` and `Data.js` and fetch our data.
```javascript
//App.js
import React from 'react';
import './App.css';
import { Data } from './data';
import User from './user/user';

function App() {
  return (
    <div className="App">
    <h1>ALL USERS</h1>
      {
        Data.map(user => <User key={user.id}
                               name={user.name}
                               email={user.email} />
        )
      }
    </div>
  );
}

export default App;
```
the result 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/b761al8gwhfvwf6w85h3.PNG)

20 users in the same page is a little bit annoying in this case we need to use pagination.

## Create the pagination component 
### 1- create `pagination` folder contain two files `pagination.jsx` and `pagination.css`.
first we need to install a [lodash](https://www.npmjs.com/package/lodash) package
```
npm i --save lodash
```
````javascript
//pagination.jsx
import React from 'react';
import _ from 'lodash';
import './pagination.css';

const Pagination = (props) => {
    
    const { itemsCount, pageSize, currentPage, onPageChange } = props;
    const pageCount = Math.ceil(itemsCount / pageSize);
    if (pageCount === 1) return null;
    const pages = _.range(1, pageCount + 1);

    return (
        <div className="pagination">
            {pages.map(page => (
                <div href={null} key={page}
                    onClick={() => onPageChange(page)}
                    className={page === currentPage ? 'active' : 'page-item'}>
                    {page}
                </div>
            ))}
        </div>
    )
}

export default Pagination;
```
itemsCount, pageSize, currentPage and onPageChange are props we will pass them when we implement the pagination in the `App.js` component.
```css
/* pagination.css */
.pagination {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pagination div {
  color: white;
  float: left;
  padding: 8px 16px;
  display: block;
  text-decoration: none;
  transition: background-color 0.3s;
  cursor: pointer;
  
}

/* Style the active/current link */
.pagination div.active {
  background-color: #05aff1;
}

/* Add a grey background color on mouse-over */
.pagination div:not(.active) {
  background-color: #444444;
}


```
### 2- Create a javascript logic that will slice our dummy data 
in the src folder we create a `paginate.js` file 
```javascript
import _ from 'lodash';

export function paginate(items, pageNumber, pageSize){
   const startIndex = (pageNumber - 1) * pageSize;

   return _(items)
            .slice(startIndex)
            .take(pageSize)
            .value();
}
```
this function take all data (items), pageNumber (the number of page we want to go if we have 20 users and and we want 4 users in each page 20/4=5pages if we want to see the users in page 3 we start slice our data from index: (3-1)*4=8), the pageSize (number of users in each page) and return new table contain  a pageSize elements.

### 3- Implement the pagination 
in App.js component :
import `paginate` function from `paginate.js` and import `useState` hook then 

```javascript
  const [currentPage, setCurrentPage] = useState(1);
  const pageSize = 4;

  const handlePageChange = page => {
    setCurrentPage(page);
  }

  const getPageData = () => {

    const paginationData = paginate(Data, currentPage, pageSize);
    return { totalCount: Data.length, data: paginationData }
  }

  const { totalCount, data } = getPageData();
```
now let's import `pagination` component and see the result 
```javascript
const { totalCount, data } = getPageData();
  return (
    <div className="App">
      <h1>ALL USERS</h1>
      {
        data.map(user => <User key={user.id}
          name={user.name}
          email={user.email} />
        )
      }
      <Pagination
        itemsCount={totalCount}
        pageSize={pageSize}
        currentPage={currentPage}
        onPageChange={handlePageChange} />
        page {currentPage} of { totalCount / pageSize }
    </div>
```

the final result 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/87j5gbgxudhbjxpa6k32.PNG)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9ot31vwjy3brqf1oomfy.PNG)

I hope you enjoyed this blog.