Pagination in reactstrap issue(updated) - reactjs

Question

Here I have created the pagination(reactstrap) for the table. Backend has 100 data records. I display 10 records per page. It works fine as i change the page.I have written some code for displaying paginating numbers.Initially, It should display paginating numbers from 1-5. On clicking 5th page, paginating numbers should display from 6 to 10 and so on.. Please help me. Thanks in advance
import {getInitialUsers, getPageByPageUsers} from "services/userService";
const Users = () => {
const [payloads, setPayloads] = useState({
offset: 0,
limit: 10,
search: "",
page: 1,
rowsPerPage: 10,
count: 0,
});
const [start, setStartPage] = useState(0);
const [end, setEndPage] = useState(payloads.limit);
const [users, setUsers]= useState([]);
useEffect(() => {
fetchInitialData();
}, []);
const fetchInitialData = async () => {
try {
let res = await getInitialUserRequests();
setUsers(res.data.data)
payloads.count = res.data.size;
getPager(res.data.size, payloads.page); /* res.data.size means total number of records */
} catch (err) {
console.log("error")
}
};
const getPager = (count, page) => {
let totalPages = Math.ceil(count / payloads.rowsPerPage);
/* facing issues in the following conditions */
if (totalPages <= 5) {
setStartPage(1);
setEndPage(totalPages);
} else {
if (page <= 5) {
setStartPage(1);
setEndPage(5);
}
if (page >= end - start) {
setStartPage(end - start);
setEndPage(end - start + 4);
}
if (page + 4 >= totalPages) {
setStartPage(totalPages - 4);
setEndPage(totalPages);
}
}
};
const handleChangePage = async (e, newPage) => {
payloads.page = newPage;
try {
let res = await getPageByPageUserRequests(newPage);
setUsers(res.data.data)
getPager(payloads.count, newPage);
} catch (err) {
console.log("error")
}
};
return (
<>
<Container className="mt--7" fluid>
<Row>
<div className="col">
<Card className="shadow">
<CardHeader className="border-0">
<h3 className="mb-0">Users</h3>
</CardHeader>
<Table className="align-items-center table-flush" responsive>
<thead className="thead-light">
<tr>
<th scope="col">Username</th>
<th scope="col">E-mail</th>
<th scope="col">Phone Number</th>
</tr>
</thead>
<tbody>
{users.length > 0 ? (
users.map((user) => (
<tr key={user.id}>
<td>{user.username}</td>
<td>{user.email}</td>
<td>{user.phone}</td>
</tr>
))
) : (
<tr className="text-center">
<th colSpan="5">No Data Found!!</th>
</tr>
)}
</tbody>
</Table>
<CardFooter className="py-4">
<nav aria-label="...">
<Pagination
className="pagination justify-content-end mb-0"
listClassName="justify-content-end mb-0"
>
<PaginationItem
className={payloads.page <= 1 && `disabled`}
>
<PaginationLink
href="#"
onClick={(e) => handleChangePage(e, payloads.page - 1)}
tabIndex="-1"
>
<i className="fas fa-angle-left" />
<span className="sr-only">Previous</span>
</PaginationLink>
</PaginationItem>
{[
...Array(
Math.ceil(payloads.count / payloads.rowsPerPage)
),
].map((page, i) => {
if (i >= start && i < end) {
return (
<PaginationItem
className={i === payloads.page ? `active` : ""}
key={i}
>
<PaginationLink
tag="button"
onClick={(e) => handleChangePage(e, i)}
>
{i}
</PaginationLink>
</PaginationItem>
);
}
})}
<PaginationItem
className={
payloads.page ==
Math.ceil(payloads.count / payloads.rowsPerPage) ?
`disabled`:''
}
>
<PaginationLink
href="#"
onClick={(e) => handleChangePage(e, payloads.page + 1)}
>
<i className="fas fa-angle-right" />
<span className="sr-only">Next</span>
</PaginationLink>
</PaginationItem>
</Pagination>
</nav>
</CardFooter>
</Card>
</div>
</Row>
</Container>
</>
);
};

Answer 1

i usually use a simple mathematical formula for this
data?.slice(pageNumber * rowsPerPage, pageNumber * rowsPerPage + rowsPerPage)?.map((row, index){
<div key={index}>{row}</div>
})