How can I create a custom pagination component in React?

How can I create a custom pagination component in React?

To create a custom pagination component in React, you can start by defining the component structure and state.

What state variables do I need for pagination?

You'll typically need state variables for the current page, total pages, and items per page.

Can you show me a simple code example?

Sure! Here's a basic example:

import React, { useState } from 'react';

const Pagination = ({ totalItems, itemsPerPage }) => {
    const [currentPage, setCurrentPage] = useState(1);
    const totalPages = Math.ceil(totalItems / itemsPerPage);

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

    return (
        <div>
            {Array.from({ length: totalPages }, (_, index) => (
                <button key={index} onClick={() => handlePageChange(index + 1)}>
                    {index + 1}
                </button>
            ))}
        </div>
    );
};

This will render buttons for each page.