I want to create simple pagination however I keep Getting errors, I know exactly what the problem is however I'm not sure how to solve it, the problem is with the data calling if called data.list in getComments the items load but the pagination won't since in handlePageClick it is data.selected

this is my api :

{
  "count": 1134,
  "list": [
   {
    "brand": "28147",
    "category": "Bakery, Bagels, Buns & Rolls",
    "code": "20641213_EA",
    "description": "In Store Baked White Submarine Rolls Pkg. of 4",
    "id": "630b710efe3e956401de6c09",
    "image": "https://assets.shop.loblaws.ca/products/20641213/b1/en/front/[email protected]",
    "inStock": "OK",
    "measurement": "130 g",
    "name": "Submarine Buns 4 Pack",
    "price": 3.99,
    "price_type": "SOLD_BY_EACH",
    "store": "realcanadiansuperstore"
 ....
},

this is my code :

function CategoryPage() {
 const {onAdd} = useStateContext();
 const [items, setItems] = useState([]);
 const [pageCount, setpageCount] = useState(0);
 let limit = 40;
 const {category, store} = useParams();


useEffect(() => {
 const getComments = async () => {
   const res = await fetch(
     `https://api/find? 
     store=${store}&category=${category}&pages=0&items=${limit}`
   );
  const data = await res.json();
  const total = data.count;
  setpageCount(Math.ceil(total / limit))
  setItems(data.list);
};

getComments();
}, [limit]);

const fetchComments = async (currentPage) => {
const res = await fetch(
   `https://api/find? 
 store=${store}&category=${category}&pages=${currentPage}&items=${limit}`
 );
const data = await res.json();
return data;
};

const handlePageClick = async (data) => {
console.log(data.selected);

let currentPage = data.selected   1;

const commentsFormServer = await fetchComments(currentPage);

setItems(commentsFormServer);

};

this is how i'm mapping the data :

{items.map((product, index) => (
            ... )}

and this is where i'm calling handlePageClick, i'm using react paginate:

<ReactPaginate
    previousLabel={"previous"}
    nextLabel={"next"}
    breakLabel={"..."}
    pageCount={pageCount}
    marginPagesDisplayed={2}
    pageRangeDisplayed={3}
    onPageChange={handlePageClick}
    containerClassName={"pagination justify-content-center"}
    pageClassName={"page-item"}
    pageLinkClassName={"page-link"}
    previousClassName={"page-item"}
    previousLinkClassName={"page-link"}
    nextClassName={"page-item"}
    nextLinkClassName={"page-link"}
    breakClassName={"page-item"}
    breakLinkClassName={"page-link"}
    activeClassName={"active"}
  />   

CodePudding user response：

I think I see it. fetchComments should return data.list instead of just data.

By the way, what you thought was the problem isn't actually one. The data in handlePageClick has nothing to do with your item state. This is a different object react-paginate is passing to that handler, to describe the new state change triggered by the user. Id probably rename that to event to make it clearer.