I have implemented custom pagination in React js which is working perfect. The issue is the I am getting all page no I want to limit that to just 3 at a time
<div className={['paginationContainer', `${totalNoOfElements >= postPerPage ? "" : "hideDisplay"}`].join(' ')}>
<span onClick={() => { backPage() }}>
<IoIosArrowBack className={['arrow', `${currentPage > 0 ? "" : "disableCursor"}`].join(' ')} />
</span>
{(() => {
let numberOfPages = [];
for (let i = 0; i < totalNoOfPages; i++) {
numberOfPages.push(
<a key={i}
className={["numberPag", `${currentPage === i ? "activePagBtn" : ""}`].join(' ')}
onClick={() => handlePageClick(i)}>
{i + 1}
</a>
);
}
return numberOfPages
})()}
<span onClick={() => nextPage()}>
<IoIosArrowForward className={['arrow', `${currentPage + 1 < totalNoOfPages ? "" : "disableCursor"}`].join(' ')} />
</span>
</div>
My page number are being generated in the tag. How can I limit to just 3 at a time and when i click next arrow icon, then it shows the remaining extra pages