Create Pagination in React

React Native, ReactJS

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"}]
  );
}

Recommendation

Using MongoDB in Node.js

Create Barcode in React

Create QR Code in React

How to validate form in React

Create Tooltips in React

Create Progressbar in React

Using MongoDB with Laravel

Create Popup Component in React

How to create charts in ReactJS

Create Drag and Drop List in React

Basic Query In MongoDB

MultiSelect Components in React

Types of Storage For React

Card Components in React

For more React Tutorials Click hereNode.js Tutorials Click here.

If you like this, share this.

Follow us on FacebookTwitterTumblrLinkedInYouTube.