As part of my progress with React, I'm trying to do pagination.

To practice, I use the Rest Countries API:

https://restcountries.com/v2/all

I installed React-paginate and I set it up.

I am at the stage where I list the countries :

import React, { useEffect, useState } from "react";
import ReactPaginate from "react-paginate";
import axios from "axios";
import("./page1.css");

function Page1() {
  const handlePageClick = (data) => {
    console.log(data.selected);
  };

  const [data, setData] = useState("");

  useEffect(() => {
    axios
      .get("https://restcountries.com/v3.1/all")
      .then(function (resp) {
        return resp.data;
      })
      .then((data) => {
        setData(data);
      });
  }, []);

  function countryList() {
    return (
      <div>
        {data.map((country) => {
          return <p>{country.name.common}</p>;
        })}
        <ReactPaginate
          previousLabel={"Previous"}
          nextLabel={"Next"}
          breakLabel={"..."}
          pageCount={25}
          marginPagesDisplayed={3}
          pageRangeDisplayed={6}
          onPageChange={handlePageClick}
          containerClassName={"pagination"}
        />
      </div>
    );
  }

  return (
    <>
      {data === "" ? (
        <h1>loading</h1>
      ) : (
        <div className="country-list">{countryList()}</div>
      )}
    </>
  );
}

export default Page1;

The problem is that on many documentation, they use the "limit" parameter.

Unfortunately, it is not available on this API.

I would like to have some advice from you, so that I can still do pagination with this kind of API limited in parameters.

Thank you for your help :) !

Edit :

SUCCESS ! Thank you :) :

 import React, { useEffect, useState } from "react";
import ReactPaginate from "react-paginate";
import axios from "axios";
import("./page1.css");

const items = [...Array(250).keys()];

function Items({ currentItems }) {
  return (
    <div className="items">
      {currentItems &&
        currentItems.map((item) => (
          <div>
            <h3>{item.name.common}</h3>
          </div>
        ))}
    </div>
  );
}

function PaginatedItems({ itemsPerPage }) {
  // We start with an empty list of items.
  const [currentItems, setCurrentItems] = useState(null);
  const [pageCount, setPageCount] = useState(0);
  // Here we use item offsets; we could also use page offsets
  // following the API or data you're working with.
  const [itemOffset, setItemOffset] = useState(0);

  useEffect(() => {
    // Fetch items from another resources.
    const endOffset = itemOffset   itemsPerPage;
    console.log(`Loading items from ${itemOffset} to ${endOffset}`);

    axios
      .get("https://restcountries.com/v3.1/all")
      .then(function (resp) {
        return resp.data;
      })
      .then((data) => {
        setCurrentItems(data.slice(itemOffset, endOffset));
      });
    setPageCount(Math.ceil(items.length / itemsPerPage));
  }, [itemOffset, itemsPerPage]);

  // Invoke when user click to request another page.
  const handlePageClick = (event) => {
    const newOffset = (event.selected * itemsPerPage) % items.length;
    console.log(
      `User requested page number ${event.selected}, which is offset ${newOffset}`
    );
    setItemOffset(newOffset);
    console.log(currentItems.length)
  };

  return (
    <>
      <Items currentItems={currentItems} />
      <ReactPaginate
        nextLabel="next >"
        onPageChange={handlePageClick}
        pageRangeDisplayed={3}
        marginPagesDisplayed={2}
        pageCount={pageCount}
        previousLabel="< previous"
        pageClassName="page-item"
        pageLinkClassName="page-link"
        previousClassName="page-item"
        previousLinkClassName="page-link"
        nextClassName="page-item"
        nextLinkClassName="page-link"
        breakLabel="..."
        breakClassName="page-item"
        breakLinkClassName="page-link"
        containerClassName="pagination"
        activeClassName="active"
        renderOnZeroPageCount={null}
      />
    </>
  );
}

// Add a <div id="container"> to your HTML to see the componend rendered.
export default PaginatedItems;

And in App.js :

  <Route path="/page3" element={  <PaginatedItems itemsPerPage={10} />} />

CodePudding user response：

You have to create pagination logic like this

// We start with an empty list of items.
const [currentItems, setCurrentItems] = useState(null);
const [pageCount, setPageCount] = useState(0);
// Here we use item offsets; we could also use page offsets
// following the API or data you're working with.
const [itemOffset, setItemOffset] = useState(0);

useEffect(() => {
  // Fetch items from another resources.
  const endOffset = itemOffset   itemsPerPage;
  console.log(`Loading items from ${itemOffset} to ${endOffset}`);
  setCurrentItems(items.slice(itemOffset, endOffset));
  setPageCount(Math.ceil(items.length / itemsPerPage));
}, [itemOffset, itemsPerPage]);

// Invoke when user click to request another page.
const handlePageClick = (event) => {
  const newOffset = (event.selected * itemsPerPage) % items.length;
  console.log(
    `User requested page number ${event.selected}, which is offset 
   ${newOffset}`
  );
  setItemOffset(newOffset);
};

refer the example in this page https://www.npmjs.com/package/react-paginate