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.

Create Pagination in React

class Pagination extends React.Component {

constructor(props, context) {


This content originally appeared on DEV Community and was authored by Chetan Rohilla

Pagination is the process of splitting the contents, or a section of contents from a website or application, into discrete pages.

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

Please like share subscribe and give positive feedback to motivate me to write more for you.

For more tutorials please visit my website.

Thanks:)
Happy Coding:)


This content originally appeared on DEV Community and was authored by Chetan Rohilla


Print Share Comment Cite Upload Translate Updates
APA

Chetan Rohilla | Sciencx (2022-04-15T01:55:00+00:00) Create Pagination in React. Retrieved from https://www.scien.cx/2022/04/15/create-pagination-in-react/

MLA
" » Create Pagination in React." Chetan Rohilla | Sciencx - Friday April 15, 2022, https://www.scien.cx/2022/04/15/create-pagination-in-react/
HARVARD
Chetan Rohilla | Sciencx Friday April 15, 2022 » Create Pagination in React., viewed ,<https://www.scien.cx/2022/04/15/create-pagination-in-react/>
VANCOUVER
Chetan Rohilla | Sciencx - » Create Pagination in React. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/04/15/create-pagination-in-react/
CHICAGO
" » Create Pagination in React." Chetan Rohilla | Sciencx - Accessed . https://www.scien.cx/2022/04/15/create-pagination-in-react/
IEEE
" » Create Pagination in React." Chetan Rohilla | Sciencx [Online]. Available: https://www.scien.cx/2022/04/15/create-pagination-in-react/. [Accessed: ]
rf:citation
» Create Pagination in React | Chetan Rohilla | Sciencx | https://www.scien.cx/2022/04/15/create-pagination-in-react/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.