Paginação usando React JS
const App()=>{
//first fetch dataList from API
const dataLists=["a","b","c","d","e","f","g"]
//to calculate the pagable buttons
const [page, setPage] = useState(0);
//change currentButton value on Clicking the page number
const [currentButton, setCurrentButton] = useState(1);
const listsPerPage = 3;
const computedActivityStreams = useMemo(() => {
let computedData = employee_list;
setPage(Math.ceil(computedData.length / listsPerPage));
return computedData;
// eslint-disable-next-line
}, [dataLists]);
//Get current lists
const indexOfLastPost = currentButton * listsPerPage;
const indexOfFirstPost = indexOfLastPost - listsPerPage;
const currentActivityLists = computedActivityStreams.slice(
indexOfFirstPost,
indexOfLastPost
);
return(
<>
//inside render
//currentActivityLists will be pagable items
{Array.isArray(currentActivityLists) &&
currentActivityLists.map((data, index) => {
return (
//html code here
);
})}
<>
)
}
sushangmi55