You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I'm trying to reset the active/selected page to the first one after selecting a different category called the "Tab" Component. Everything else is working well, Items are being displayed correctly, but for some reason, 'page' or 'force page' will not use or respect any input I give it after pressing a different Tab. I don't know exactly what I could be doing wrong.
My "Pagination" Component, which uses react-paginate:
import React, { useState, useEffect } from "react";
import Items from './Items';
import ReactPaginate from "react-paginate";
import "./Pagination.css";
function Pagination({ItemsList, ItemsPerPage}) {
// 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);
const items = ItemsList.map((value)=>{
return value;
});
// Simulate fetching items from another resources.
// (This could be items from props; or items loaded in a local state
// from an API endpoint with useEffect and useState)
const endOffset = itemOffset + ItemsPerPage;
console.log(`Loading items from ${itemOffset} to ${endOffset}`);
const currentItems = items.slice(itemOffset, endOffset);
console.log(currentItems);
const pageCount = Math.ceil(items.length / 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);
};
return (
<>
<Items data={currentItems}/>
<ReactPaginate
className="pagination"
breakLabel="..."
nextLabel=" >"
// initialPage={2}
// activePage={forcePage}
//forcePage={0}
page={0}
onPageChange={handlePageClick}
pageRangeDisplayed={5}
pageCount={pageCount}
pageClassName = 'PageElement'
previousLabel="< "
renderOnZeroPageCount={null}
/>
</>
);
};
export default Pagination;
My 'Projects' Component, which calls the 'Pagination' Component:
Hello.
I'm trying to reset the active/selected page to the first one after selecting a different category called the "Tab" Component. Everything else is working well, Items are being displayed correctly, but for some reason, 'page' or 'force page' will not use or respect any input I give it after pressing a different Tab. I don't know exactly what I could be doing wrong.
My "Pagination" Component, which uses react-paginate:
My 'Projects' Component, which calls the 'Pagination' Component:
The text was updated successfully, but these errors were encountered: