I am working on Next.js project. I have implemented React Paginate ( ^8.2.0 ) at a place. React Pagination Issue.
Here's the code :
<ReactPaginate
previousLabel={"Previous"}
nextLabel={"Next"}
breakLabel={"..."}
pageCount={filteredNftData?.totalPages}
marginPagesDisplayed={1}
pageRangeDisplayed={2}
onPageChange={handlePageClick}
containerClassName={"pagination"}
subContainerClassName={"pages pagination"}
activeClassName={"active"}
forcePage={pageNum - 1}
/>
This is where i am getting the array of filteredNftData :
const filteredNftData = showNotMinted ? notMintedNftCardData : nftCardData;
This is from where i am calling these API's :
const getwishlistApi = async (nextrprev, isMinted = false) => {
let walletAddress;
!account.address ? (walletAddress = "") : (walletAddress = account.address);
try {
let result = await getNftCards(categoryName, pageNum, walletAddress, isMinted);
setNotMintedNftCardData(result);
if (nextrprev) {
tabsRef?.current?.scrollIntoView({
behavior: "smooth",
block: "start",
});
}
} catch (error) {
toast.error("Error fetching data:", error);
}
try {
let result = await getNftCards(categoryName, pageNum, walletAddress);
setNftCardData(result);
if (nextrprev) {
tabsRef?.current?.scrollIntoView({
behavior: "smooth",
block: "start",
});
}
} catch (error) {
toast.error("Error fetching data:", error);
}
};
These are the states in which i am getting data :
const [nftCardData, setNftCardData] = useState([]);
const [notMintedNftCardData, setNotMintedNftCardData] = useState([]);
Why am i facing this issue : React Pagination Issue.
I am expecting this : Correct output on npm run dev. But it's not showing expected response on npm start.