Can someone help me add a "..." between pagination buttons if there are more than five buttons in my code? Here is the current pagination script I have:
import React, { useState } from 'react'
const Pagination = ({productsPerPage, totalPosts, paginate}) => {
const [currentPage, setCurrentPage] = useState(0)
const PageNumbers =[]
const int = Math.ceil(totalPosts / productsPerPage)
if (int === 1 ) return null
for (let i = 1; i<= int; i++) {
PageNumbers.push(i)
}
return (
<nav className="">
<ul className="pagination">
{PageNumbers.includes(currentPage - 1) &&
<a className="page-link" href="!#" onClick={() =>
{ setCurrentPage(currentPage - 1);
paginate(currentPage - 1); }}> Previous
</a>}
{PageNumbers.map(number=> (
<li key={number} className={number === currentPage ? 'page-item' : 'page-item '}>
<a onClick={ ()=> paginate(number)} href="!#" className="page-link active">
{number}
</a>
</li>
))}
{PageNumbers.includes(currentPage + 1) &&
<a className="page-link" href="!#" onClick={() =>
{setCurrentPage(currentPage + 1);
paginate(currentPage + 1); }}> Next
</a>}
</ul>
</nav>
)
}
export default Pagination