Pagination in React/Typescript

Question

So I am trying to achieve pagination functionality. Here I have crypto API and a table where data lies, the thing I want to achieve is displaying 10 items per page. The real problem is that it is showing no errors, but it is not working. When I click on the next page button I am changing the pageNumber but it is not changing the data. I can't figure where the problem lies.

Coin Component

import React,  {lazy, Suspense, useEffect, useState} from 'react'
import {Coin} from '../../interface'
import './Coins.css'
import Pagination from "./Pagination";
const CoinTable = lazy(() => import('../../components/CoinData/CoinTable'))



 export const Coins:React.FC = () => {
  const [coinsData, setCoinsData] = useState<Coin[]>([])
  const [page, setPage] = useState(1);
  const [totalPages, setTotalPages] = useState(10);


  const handlePrevPage = (prevPage: number) => {
    setPage((prevPage) => prevPage - 1);
  };

  const handleNextPage = (nextPage: number) => {
    setPage((nextPage) => nextPage + 1);
  };
   
  

    
    const fetchData= async()=>{
      const response= await fetch(`https://api.coingecko.com/api/v3/coins/markets? 
      vs_currency=usd&order=market_cap_desc&?${page}&per_page=10&sparkline=false`)
      const result = await response.json()
          setCoinsData(result); 
          setTotalPages(totalPages);
      }
      
      useEffect(()=>{
          fetchData()
      })
    return (
        <>
          <Suspense fallback={<div>Loading...</div>}>
          <table className="table" width="80%">  
        <thead>
          <tr>
            <th>Cryptocurrencies</th>
            <th>Price</th>
            <th>24H Change</th>
            <th>Market Cap</th>
          </tr>
        </thead>
        </table>
          {coinsData.map((coin)=>
         <CoinTable key={coin.id}
               {...coin}
                />
          )}
           <Pagination
            totalPages={totalPages}
            currentPage={page}
            handlePrevPage={handlePrevPage}
            handleNextPage={handleNextPage}
          />
          </Suspense>   
         </>
    )
}

Pagination

import React, {  } from "react";
import PropTypes from "prop-types";

 interface Props {
    currentPage: number;
    totalPages: number;
    handleNextPage: (page: number) => void;
    handlePrevPage: (page: number) => void;
  }
const Pagination:React.FC <Props>= ({
  currentPage,
  totalPages,
  handlePrevPage,
  handleNextPage,
}) => {
  return (
    <div className="pagination-button-wrapper">
      <button
        className="pagination-button"
        onClick={() => handlePrevPage(currentPage)}
        disabled={currentPage === 1}
      >
        &larr;
      </button>

      <span className="pagination-page-info">
        Page {currentPage} of {totalPages}
      </span>

      <button
        className="pagination-button"
        onClick={() => handleNextPage(currentPage)}
        disabled={currentPage === totalPages}
      >
       
      </button>
    </div>
  );
};

Pagination.propTypes = {
    currentPage: PropTypes.number.isRequired,
    totalPages: PropTypes.number.isRequired,
    handlePrevPage: PropTypes.func.isRequired,
    handleNextPage: PropTypes.func.isRequired,
  };

export default Pagination

Answer 1

Your useEffect is not re-running when page changes. Add it to the dependency array so that new data is fetched when it changes:

useEffect(()=>{
  fetchData()
}, [page])

Edit: based on the codesandbox, the URL should be:

https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&page=${page}&per_page=10&sparkline=false

Instead of c&?${page}&.