How to fix when React JS Pagination component does Nothing on Click?

Question

Im using react js Pagination component and wrote the code as mentioned in documentation but it does nothing onClick.

import Pagination from "react-js-pagination"

and here i use it:

 {this.state.spareParts.map((part, index) => <Col md="3" lg="3" sm="6" xs="6" xl="3"> <Card> <h4> <b> {part.Name} </b> </h4> <h4> Rs. {part.Price} </h4> <h5> By: {part.CompanyName} </h5> </Card> </Col> )} <Pagination data={this.state.spareParts} activePage={this.state.activePage} itemsCountPerPage={10} totalItemsCount={50} pageRangeDisplayed={5} onChange={this.handlePageChange} />

and here is handlePageChange function:

 handlePageChange(pageNumber) { console.log(`active page is ${pageNumber}`); this.setState({activePage: pageNumber}); }

Can someone tell me what Im doing wrong here becoz of which Im getting no results on click on pagination bar.

Answer 1

It's working for me. Can you try below code.

Why do you need to send data ( spareParts ) as the component doesn't take data as prop.

import React, { Component } from "react";
import ReactDOM from "react-dom";
import Pagination from "react-js-pagination";
import 'bootstrap/dist/css/bootstrap.min.css';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      activePage: 15
    };
  }

  handlePageChange(pageNumber) {
    console.log(`active page is ${pageNumber}`);
    this.setState({activePage: pageNumber});
  }

  render() {
    return (
      <div>
        <Pagination
          activePage={this.state.activePage}
          itemsCountPerPage={10}
          totalItemsCount={450}
          pageRangeDisplayed={5}
          onChange={this.handlePageChange}
        />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

Happy Coding!!!

Answer 2

For someone who looking for solutions in 2022

// Try to add event.stopPropagation();
       <a className={`page-link ${page == props.currentPage ? 'isDisabled-link' : ''}`} href="#"
                    onClick={(event) => { event.stopPropagation(); props.pageChanged(page) }}
        >
           {page}
     </a>