How to Implement Pagination in your React.js?

Pagination Logic

We'll begin by focusing on the App.jsx file within the src directory. This is where the core pagination logic will be implemented. Here are the key steps:

• Data Storage: Utilize the useState hook to store data fetched from the server. Initialize the state with an empty array.
• Loading Indicator: Set up a loading state to notify users when data is being fetched. Initialize it as false.
• Current Page Management: Create a currentPage state to keep track of the currently displayed page. If you're working with 100 items and want to show 10 per page, initialize this state with 1.
• Posts Per Page: Implement a state to manage the number of posts displayed per page. In this article, we'll consider 10 posts per page.

    useEffect (() => {
        const fetchPosts = async () => {
            setLoading (true);
            try {
                const response = await fetch("https://jsonplaceholder.typicode.com/posts");
                const data = await response.json();
                setPosts (data);
                setLoading (false);
            } catch (error) {
                console.log(error);
            }
        };
        fetchPosts();
    }, []);          
                    

Fetching Data from the Server

Here's how you can handle the data-fetching process:

• UseEffect for Fetching: Create a useEffect to fetch data from the API. This ensures that data is fetched when the component mounts.
• Fetching Function: Inside the useEffect, implement an async function using fetch to retrieve data from the API endpoint.
• Updating State: Set the post state to the fetched data. Don't forget to handle loading states appropriately.

Displaying Paginated Data

Over here we will create a Post comment. This component will receive the posts array and the loading state as props. Here's how you can structure the Post component:

    import React from 'react';

    const Post = ({ posts, loading }) => {
        if (loading) {
            return <h1>Loading...</h1>;
        }

        return (
            <>
                {posts.map((data, index) => (
                <div className='list' key={index}>
                    <p>{data.title}</p>
                </div>
            ))}
        </>
        );
    };

    export default Post;
        

To make it more appealing and attractive you can integrate the CSS coding

    body {
        background: black; color: white;
    }

    .container {
        width: 100%;
        max-width: 800px;
        margin: auto;
    }

    .list {
        border: 1px solid #fff;
        padding: 5px;
    }
        
    .pagination {
        display: flex;
        border: 1px solid #fff;
        justify-content: space-between;
        padding: 20px;
    }

    .pagination button {
        padding: 10px;
    }
        
    .active {
        background: black;
        color: #fff;
        border: 1px solid #fff;
    }
                

Pagination Component

Over here we need to create a Pagination component that will calculate the number of pages based on the data length and posts per page. Here's the process

• Calculating Pages: Using a loop, determine the number of pages needed based on the data length and posts per page.
• Rendering Page Numbers: Render buttons with page numbers for navigation. We'll utilize the map function to create buttons for each page.

    import React from 'react';

    const Pagination = ({ postsPerPage, length}) => {
        const paginationNumbers = [];

        for (let i = 1; i <= Math.ceil(length / postsPerPage); i++) {
            paginationNumbers.push(i);
        }

        return (
            <div className='pagination'>
                {paginationNumbers.map((pageNumber) => (
                    <button key={pageNumber}>{pageNumber}</button>
                ))}
            </div>
        );
    };
    export default Pagination;
    

Handling Page Changes

To handle page change you need to make the pagination dynamic. This involves updating the currentPage state. Here's how you can achieve this

• Creating the Handler: Define a function, such as handlepagination, in your App.jsx to update the currentPage state.
• Passing the Handler: Pass the handlePagination function to the Pagination component as a prop.
• Using the Handler: Inside the Pagination component, implement the onClick event for each page button. Call the handlePagination function with the appropriate page number.

    const handlePagination = (pageNumber) => {
        setCurrentPage (pageNumber);
    };

    // Inside your component's return...
    <Pagination
        length={posts.length}
        postsPerPage={postsPerPage}
        handlePagination={handlePagination}
    />
            

Highlighting the Active Page

By highlighting the active page you get a better user experience where you need to add a dynamic class to the active page's button. Here's how:

• Conditional Class: Inside the Pagination component's map function, conditionally apply a class to the active page's button.

    {paginationNumbers.map((pageNumber) => (
        <button
            key={pageNumber}
            className={currentPage === pageNumber? 'active' : ''}
        >
            {pageNumber}
        </button>
    ))}