I had a bug small from the react pagination when I try to switch between other pagination tab the grid contents got increasing for each of the time I am switch how can I fix this bug do u got any idea
I have installed this npm package
https://www.npmjs.com/package/react-paginate
I will provide my deployed project below:
https://shoe-ecommerce-ez1c.vercel.app/
import React, { useState, useContext } from "react";
import ReactPaginate from "react-paginate";
import { ShopContext } from "./Context/ShopContext";
import Products from "./Components/Products";
import { Link } from "react-router-dom";
function PaginationProdGrid() {
const { products } = useContext(ShopContext);
const [currentPage, setCurrentPage] = useState(0);
const itemsPerPage = 6;
const displayedItems = products.slice(
currentPage * itemsPerPage,
(currentPage + 1) * itemsPerPage
);
const handlePageChange = (data) => {
setCurrentPage(data.selected);
};
return (
<>
<div className="grid md:grid-cols-3 grid-cols-1 gap-4 m-8">
{displayedItems && displayedItems.length > 0 ? (
displayedItems.map((item) => (
<Link key={item._id} to={`/productInfo/${item._id}`}>
<Products
name={item.name}
image={item.image}
price={item.price}
/>
</Link>
))
) : (
<p className="text-center">No products available</p>
)}
</div>
<div className="flex justify-center">
<ReactPaginate
previousLabel={"previous"}
nextLabel={"next"}
breakLabel={"..."}
breakClassName={"break-me"}
pageCount={Math.ceil(products.length / itemsPerPage)}
marginPagesDisplayed={2}
pageRangeDisplayed={5}
onPageChange={handlePageChange}
containerClassName={
"pagination flex items-center text-black dark:text-white"
}
pageClassName={
"px-3 py-2 rounded-md mx-1 "
}
previousClassName={
"px-3 py-2 rounded-md mx-1 "
}
nextClassName={
"px-3 py-2 rounded-md mx-1 "
}
activeClassName={"bg-blue-500 "}
/>
</div>
</>
);
}
export default PaginationProdGrid;