mattt.pw

I started this project hoping to learn more about consuming data from a remote API and cementing the knowledge I already had. It turns out not only did I do this, but I also started to understand the complexities behind smaller functionalities we often take for granted, such as the logic and code behind pagination, which I'm going to focus on here.

Fortunately, for the sake of learing pagination, Bootstrap actually came in useful in this project by providing prestyled pagination elements. Let's have a look at the pagination component.

export default function JobsPagination({page, setPage, hasNextPage}) {
    return (
        <Pagination>
            {page !==1 && <Pagination.Prev/>}
            {page !==1 && <Pagination.Item>1</Pagination.Item>}
            {page >2 && <Pagination.Ellipsis/>}
            {page >2 && <Pagination.Item>{page - 1}</Pagination.Item>}
            <Pagination.Item active>{page}</Pagination.Item>
            {hasNextPage &&<Pagination.Item>{page + 1}</Pagination.Item>}
            {hasNextPage &&<Pagination.Next/>}
        </Pagination>
    )
}