How to implement pagination in React

Implementing a pagination component in a React application can enhance user interface friendliness, especially when handling large datasets. Here is a straightforward implementation of a pagination component with step-by-step guidance and examples:

1. Understanding Basic Concepts

First, identify the core requirements for pagination:

• Total data volume: Determine the total number of data items.
• Number of items per page: Specify how many items to display on each page.
• Current page number: Track which page the user is viewing.

2. Designing Component State

In your React component, define state variables to manage these values:

jsx
const [currentPage, setCurrentPage] = useState(1);
const [itemsPerPage, setItemsPerPage] = useState(10);

3. Pagination Logic

Calculate the data range for the current page based on the page number and items per page. Assuming data represents your complete dataset:

jsx
const indexOfLastItem = currentPage * itemsPerPage;
const indexOfFirstItem = indexOfLastItem - itemsPerPage;
const currentItems = data.slice(indexOfFirstItem, indexOfLastItem);

4. Rendering the Component

Display the current page's data alongside pagination controls. These controls include buttons for page numbers that update currentPage when clicked:

jsx
const pageNumbers = [];
for (let i = 1; i <= Math.ceil(data.length / itemsPerPage); i++) {
    pageNumbers.push(i);
}

return (
    <div>
        <ul>
            {currentItems.map(item => (
                <li key={item.id}>{item.content}</li>
            ))}
        </ul>
        <div>
            {pageNumbers.map(number => (
                <button key={number} onClick={() => setCurrentPage(number)}>
                    {number}
                </button>
            ))}
        </div>
    </div>
);

5. Example

Consider a to-do list scenario where pagination is applied:

jsx
function TodoPagination({ todos }) {
    const [currentPage, setCurrentPage] = useState(1);
    const [todosPerPage] = useState(5);

    const indexOfLastTodo = currentPage * todosPerPage;
    const indexOfFirstTodo = indexOfLastTodo - todosPerPage;
    const currentTodos = todos.slice(indexOfFirstTodo, indexOfLastTodo);

    const renderTodos = currentTodos.map((todo, index) => {
        return <li key={index}>{todo.task}</li>;
    });

    const pageNumbers = [];
    for (let i = 1; i <= Math.ceil(todos.length / todosPerPage); i++) {
        pageNumbers.push(i);
    }

    const renderPageNumbers = pageNumbers.map(number => {
        return (
            <button key={number} onClick={() => setCurrentPage(number)}>
                {number}
            </button>
        );
    });

    return (
        <div>
            <ul>{renderTodos}</ul>
            <div>{renderPageNumbers}</div>
        </div>
    );
}

Conclusion

This example provides a foundational implementation. For real-world applications, address additional considerations such as asynchronous data fetching, pagination control styling, and responsive layouts. Libraries like react-paginate offer robust solutions for complex pagination needs.