react component that can be used with Express-REST-API-Generator

paginations.jsx

import React from 'react';

const Paginations = React.memo(({ pages, lastpage, page, prev, next, pageClick }) => {
    let paginations = [], showNext = page + 3, showLast = pages - 3, lastpaginations = []
    for (let i = 1; i <= pages; i++) {
        //show last 3
        if (i >= page - 3) {
            if (i < showNext) {
                paginations.push(<li key={i} className={`page-item ${page === i && 'active'}`}><button onClick={() => page !== i && pageClick(i)} className="link-button page-link">{i}</button></li>)
            } else if (i > showLast) {
                lastpaginations.push(<li key={i} className={`page-item ${page === i && 'active'}`}><button onClick={() => page !== i && pageClick(i)} className="link-button page-link">{i}</button></li>)
            }
        }

    }
    return (<ul className="pagination mrgb0">
        <li className={`page-item page-prev ${page === 1 && 'disabled'}`}>
            <button onClick={prev} className="page-link link-button" tabIndex={-1}>
                Prev
    </button>
        </li>
        {paginations}
        {lastpaginations.length > 0 && <li className='page-item'><button className="link-button page-link">.....</button></li>}
        {lastpaginations}
        <li className={`page-item page-next  ${(page === pages || lastpage) && 'disabled'}`}>
            <button onClick={next} className="link-button page-link">
                Next
    </button>
        </li>
    </ul>
    );
});

export default Paginations;