Adding Pages To A React App

I’m currently doing a small online course and one of the exercises given was adding pages to a react app which I hadn’t previously done.

I created a new file called “pagination.jsx” and added a functional component also called “pagination”.

import React from 'react';
const Pagination = () => {
};

In the main component which requires the pages, I’ve imported the pagination component and also called in the “<Pagination />” component in the render method of the main component. In this component, I’ve passed down the total number of items and the page size. Also, when the user clicks on a page which will display a different list of items, I will add a click event.

<Pagination itemsCount={count} pageSize={pageSize} currentPage={currentPage} onPageChange={this.handlePageChange}/>

In the main component, I’ve built the event handler “handlePageChange” which will receive the new page number that’s clicked on by the user. To render the pages, I’m using bootstrap, specifically copying this code below.

In the pagination component, I’ve added the bootstrap code -

return (
<div>
    <ul className="pagination">
    <li className="page-item">
    <a className="page-link">{page}</a></li>
))}
</ul>
</div>
)

Still in the pagination component, part of the interface for the pagination component is “itemCount” and “pageSize”, these have now been set to “props” and using lodash to create an array with the total number of pages. Now the number of pages can be calculated.

import _ from "lodash";
const Pagination = props => {
   
   const { itemsCount, pageSize } = props
   const pagesCount = itemsCount / pageSize
   const pages = _.range(1, pagesCount + 1)
};

I’ve mapped over the new array, “pages”. This can be mapped over to return a list as below -

return (
<div>
  <ul className="pagination">
    {pages.map(page => (
      <li 
        key={page} 
        className="page-item">
     <a className="page-link">{page}</a>
     </li>
 ))}
</ul>
</div>
)

When the user clicks on the anchor tag that consists of the page, an event will be raised to signify that the page should be changed. So, onClick is set to an arrow function, call in “props.onPageChange” and pass the current page as an argument -

return (
<div>
  <ul className="pagination">
    {pages.map(page => (
      <li 
        key={page} 
        className="page-item">
     <a className="page-link" 
        onClick={() =>props.onPageChange(page)}>{page}</a>
     </li>
 ))}
</ul>
</div>
)
handlePageChange = page => {
   this.setState({ currentPage: page})
};

Back in the main component, in the handlePageChange function, the state for the current page will be set to the page clicked.

handlePageChange = page => {
   this.setState({ currentPage: page})
};

When a user clicks on a new page, the event onClick event in the pagination component is raised. In the main component, the handlePageEvent function handles the onClick event and updates the state. When an event is raised the component re-renders. In the main component, as this event pertains to the pagination component, the component re-renders with new props and will render the new page.