In React Paginate, why there are multiple ul's rendering instead of showing me the page numbers?

28 Views Asked by At

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.

0

There are 0 best solutions below