Create Pagination in React

Pagination is the process of splitting the contents, or a section of contents from a website or application, into discrete pages. Here we will create pagination in React applications.

Create Pagination in React

class Pagination extends React.Component {

  constructor(props, context) {
    super(props, context);
    this.state = {
      currentPage: null,
      pageCount: null
    }
  }
  
  componentWillMount() {
    const startingPage = this.props.startingPage
      ? this.props.startingPage
      : 1;
    const data = this.props.data;
    const pageSize = this.props.pageSize;
    let pageCount = parseInt(data.length / pageSize);
    if (data.length % pageSize > 0) {
      pageCount++;
    }
    this.setState({
      currentPage: startingPage,
      pageCount: pageCount
    });
  }
  
  setCurrentPage(num) {
    this.setState({currentPage: num});
  }

  createControls() {
    let controls = [];
    const pageCount = this.state.pageCount;
    for (let i = 1; i <= pageCount; i++) {
      const baseClassName = 'pagination-controls__button';
      const activeClassName = i === this.state.currentPage ? `${baseClassName}--active` : '';
      controls.push(
        <div
          className={`${baseClassName} ${activeClassName}`}
          onClick={() => this.setCurrentPage(i)}
        >
          {i}
        </div>
      );
    }
    return controls;
  }

  createPaginatedData() {
    const data = this.props.data;
    const pageSize = this.props.pageSize;
    const currentPage = this.state.currentPage;
    const upperLimit = currentPage * pageSize;
    const dataSlice = data.slice((upperLimit - pageSize), upperLimit);
    return dataSlice;
  }

  render() {
    return (
      <div className='pagination'>
        <div className='pagination-controls'>
          {this.createControls()}
        </div>
        <div className='pagination-results'>
          {React.cloneElement(this.props.children, {data: this.createPaginatedData()})}
        </div>
      </div>
    );
  }
}

Pagination.propTypes = {
  data: React.PropTypes.array.isRequired,
  pageSize: React.PropTypes.number.isRequired,
  startingPage: React.PropTypes.number.isRequired
};

Pagination.defaultProps = {
  pageSize: 4,
  startingPage: 1
};

class Content extends React.Component {

  render() {
    const data = this.props.data;
    return (
      <div className='content'>
        {data.map((item) => {
          return (
            <div className='content__item'>
              {item.id} {item.item_name}
            </div>
          );
        })}
      </div>
    );
  }
}

class App extends React.Component {
  render() {
    return (
      <Pagination
        data={sampleData()}
      >
        <Content />
      </Pagination>
    );
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('app')
);

function sampleData() {
  return (
    [{"id":1,"item_name":"Item 1"},
    {"id":2,"item_name":"Item 2"},
    {"id":3,"item_name":"Item 3"},
    {"id":4,"item_name":"Item 4"},
    {"id":5,"item_name":"Item 5"},
    {"id":6,"item_name":"Item 6"},
    {"id":7,"item_name":"Item 7"},
    {"id":8,"item_name":"Item 8"},
    {"id":9,"item_name":"Item 9"},
    {"id":10,"item_name":"Item 10"}]
  );
}