Not clear how to use it about react-js-pagination

[davidalejandroaguilar]

@ilyasogonov, this component only generates markup based on the total items. There are only 3 required props: totalItemsCount, activePage and an onChange handler.

To display things, just have your component display things based on the activePage:

import React from 'react';
import Pagination from 'react-js-pagination';

const THINGS_PER_PAGE = 5;

export default class Things extends React.Component {
  state = {
    activePage: 1,
    things: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
  };

  // Just set the active page on state on page change.
  handlePageChange = pageNumber => this.setState({ activePage: pageNumber });

  render() {
    // Things shown will be calculated based on active page.
    const indexOfLastThing = this.state.activePage * THINGS_PER_PAGE;
    const indexOfFirstThing = indexOfLastThing - THINGS_PER_PAGE;
    // For page 1, you will get things.slice(0, 5).
    // For page 2, you will get things.slice(5, 10).
    const thingsShown = this.state.things.slice(
      indexOfFirstThing,
      indexOfLastThing
    );

    // Then just show the things.
    return (
      <div>
        <ul>
          {thingsShown.map((thing, index) => (
            <li key={index}>{thing}</li>
          ))}
        </ul>

        <Pagination
          onChange={this.handlePageChange}
          activePage={this.state.activePage}
          totalItemsCount={this.state.things.length}
          itemsCountPerPage={5}
        />
      </div>
    );
  }
}

Ideally, you'd want to separate your component from containers, but this is just a mixed example for you to see the general idea.

[Ruchit1395]

@davidalejandroaguilar for the same code, line to line, I'm getting this results. CSS not working.

[davidalejandroaguilar]

Hey there, as I said:

this component only generates markup

There's no CSS, you have to write that yourself. The first page of the package itself states it too:

The component comes with no built-in styles