I am working with the Rick and Morty API , and I am trying to implement React Pagination but I can't seem to get it working

Question

I am working with Rick and Morty API , and I am trying to implement React Pagination. However, I can not seem to render the page numbers on to the website page using React Paginate. I only get the previous and next buttons with page number(1) for the first page. I have included the pagination code that I have so far written and screenshots of it. I appreciate any help in advance..... Thank you!

import { useState, useEffect } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap';

import Filters from './components/Filters/Filters';
import Cards from './components/Cards/Cards';
import Pagination from './components/Pagination/Pagination';
import Search from './components/Search/Search';



function App() {

  let [pageNumber, setPageNumber] = useState(1);
  let [fetchedData, setFetchedData] = useState([]);
  let [search, setSearch] = useState("smith");
  let {info, results} = fetchedData;

  let api = `https://rickandmortyapi.com/api/character/?page=${pageNumber}&name=${search}`;

  useEffect(() => {
    (async function () {
      let data = await fetch(api).then(res => res.json());
      setFetchedData(data);
    })();
  }, [api])

  return (
    <div className="App">
      <h1 className='text-center ubuntu my-4'>Rick & Morty <span className="text-primary">WiKi</span> </h1>

      <Search setPageNumber={setPageNumber} setSearch={setSearch} />

      <div className="container">
        <div className="row">
          <div className="col-3"><Filters /></div>
          <div className="col-8">
            <div className="row">
            <Cards results={results} /> 
            </div>
          </div>
        </div>
      </div>

      <Pagination info={info} pageNumber={pageNumber} setPageNumber={setPageNumber} />
    </div>
  );
}

export default App;


import React from 'react';
import ReactPaginate from 'react-paginate';
import './pagination.css'

const Pagination = ({ info, setPageNumber, pageNumber }) => {
  
  return (
    <ReactPaginate 
      className='pagination justify-content-center'
      pageCount={info?.pages} 
      previousLabel='Prev'
      nextLabel='Next'
      />
  )
}

export default Pagination

Answer 1

By looking response from your api.. the info.pageCount is 1.

So the Total Page Count is only One in the PageCount of the React Pagination..

So I think Reack Pagination Works as expected..