I'm developing code that aims to show a limit number of cards per page based on the amount of data stored in a json file. I expected that clicking on the ">" or "<" icon would go to the next or previous page respectively changing the cards.
My App.tsx looked like this:
import { default as data } from "./DATA.json" //contains an array of json objects.
let [page, setPage] = useState(1); //is a state that stores the beginning of pagination.
const PER_PAGE = 8; //stores how many cards will be displayed per page.
const totalPages= Math.ceil(data.length / PER_PAGE); //stores the total number of pages
import { usePagination } from "./Pagination";
//is a component that receives as parameter data and PER_PAGE. Inside the component there are 4 functions:
currentData(); //get current data from json
jump(); //jump to the next page
next(); //show the contents of the next page
prev(); //show the contents of the previous page
const _DATA = usePagination(data, PER_PAGE);
Ps: In the component usePagination.tsx I passed the DataBooks interface for the data and itemsPerPage parameters, however, the error Cannot read properties of undefined (reading 'length') appears. The end result I want was not achieved (change cards accordingly as you go to the next or previous page) for a reason I don't know what it is. Someone help me please I don't know what to do.
import { useState } from "react";
import Books from "./interfaces";
interface DataBooks {
data: Books[];
itemsPerPage: number;
}
export const usePagination = ({ data, itemsPerPage }: DataBooks) => {
const [currentPage, setCurrentPage] = useState(1);
const maxPage = Math.ceil(data.length / itemsPerPage);
function currentData() {
const begin = (currentPage - 1) * itemsPerPage;
const end = begin itemsPerPage;
return data.slice(begin, end);
}
function next() {
setCurrentPage((currentPage) => Math.min(currentPage 1, maxPage));
}
function prev() {
setCurrentPage((currentPage) => Math.max(currentPage - 1, 1));
}
function jump(page: number) {
const pageNumber = Math.max(1, page);
setCurrentPage((currentPage) => Math.min(pageNumber, maxPage));
}
return { next, prev, jump, currentData, currentPage, maxPage };
};
CodePudding user response:
UPDATE
Live demo of the project fixed: codesandbox
In App.tsx
the Pagination
component should be set like this:
<Pagination count={totalPages} page={page} onChange={handleChange} />
You don't need to manually pass event
and page
to this onChange
function because MUI will handle these internally. More specifically, it pass to the function which page is being changed to instead of the the current page.
This is the main reason why the Pagination
was not functioning. I changed the title of cards to item.title "-" item.id
so you can check the live demo to see it works.
Syntax fixes
I fixed some syntax error so there is no error message about types.
Changes made in UsePagination.tsx
// Need to check if data is provided
const maxPage = data ? Math.ceil(data.length / itemsPerPage) : 1;
function currentData() {
// Again this data may not be provided
if (!data) return [];
const begin = (currentPage - 1) * itemsPerPage;
const end = begin itemsPerPage;
return data.slice(begin, end);
}
Changes made in App.tsx
:
// This function take an object as argument
const _DATA = usePagination({ data, itemsPerPage: PER_PAGE });