Client side pagination with React 
Tags: javascript, react, beginners, pagination
Published: 2020-09-01 20:47:03

Hello guys here I'll be teaching you how to implement a client side pagination with React.
You don't have to put your application users through the boring experience of scrolling and more scrolling to see more content on your application, wouldn't it be nice to have a next or previous button to help with displaying more content? Well enough talk and let's get into the code.
This tutorial assumes you already know how to setup a project with create-react-app.

The first thing we'll do it create a component and make a request to join placeholder to get about 50 users to display, here is it in code.

```javascript
import React from "react";

  const Posts 
 = () => {
    const [posts, setPosts]=useState([])

    useEffect(()=>{
        fetch('https://jsonplaceholder.typicode.com/posts?_limit=50')
        .then(res => res.json())
        .then(data=>{
            setPosts(data)
        })
    })   

    return (
        <div className='body'>
            <h2 style={{textAlign:'center', marginBottom:'20px'}} >Paginations</h2>
            {posts.map((post)=>(
                <div key={post.id} style={{marginBottom:'20px'}} >
                    <h2>{post.title} </h2>
                    <p>{post.body} </p>
                </div>
            ))}
        </div>
    );
};

``` 

This is how it looks like without pagination 


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/rkch0vuf9ann5izfjfwz.gif)
...
Next we create some constants  to help with the pagination and logic for the previous and next button,  the constants are
1. current page number 
2. number of items to show per page 
3. current page 
4. the paginated posts

it will look like this in code
 ``` javascript
  const Posts = () => {
    const [posts, setPosts]=useState([])
    const [pageNumber, setPageNumber]= useState(1)
    const [postNumber]= useState(5)


    const currentPageNumber = (pageNumber * postNumber) - postNumber  
    const paginatedPosts = posts.splice(currentPageNumber, postNumber)

    const handlePrev =()=>{
        if(pageNumber === 1) return
        setPageNumber(pageNumber - 1)
    }
    const handleNext =()=>{
        setPageNumber(pageNumber + 1)
    }

    useEffect(()=>{

        fetch('https://jsonplaceholder.typicode.com/posts?_limit=50')
        .then(res => res.json())
        .then(data=>{
            setPosts(data)
        })
    })   

    return (
        <div>
            <h2>Posts</h2>
            {paginatedPosts.map((post)=>(
                <div key={post.id}>
                    <h2>{post.title} </h2>
                    <p>{post.body} </p>
                </div>
            ))}
            <div>Page {pageNumber} </div>
            <div>
                <button onClick={handlePrev} >prev</button>
                <button onClick={handleNext}>next</button>
            </div>
        </div>
    );
};
```
And now we have this 👇

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/487aqzg4flvkw7awbpv6.gif)


That's it guys a simple pagination with React, this is my very first article and I'll be writing more on React and Javascript.

Have any thing you're struggling with about React or Javascript? You can send me a mail on theakinnagbe@gmail.com. 
I'll do my best to help if I can. Cheers ❤❤