How do I add pagination to my react website

Question

I build a simple site where you can select a city from a drop down menu and it will fetch the data and show all the banks in the city. But there are so many banks in a city that the page becomes really long and loading takes too much time. I want to add pagination. How am I suppose to do that? Below is my code

App.js

import './App.css';
import BankRow from './bankRows.js'
import $ from 'jquery';

class App extends Component {
  constructor(props){
    super(props)
    this.state={}

    this.performSearch("")
  }
  performSearch(searchTerm){
    const urlString="https://.herokuapp.com/banks?city="+searchTerm
    $.ajax({
        url: urlString,
        success: (searchResults)=>{
          console.log("Fetched data successfully")
          var bankRows=[]
          searchResults.forEach((bank)=>{
              const bankRow=<BankRow key={bank.ifsc} bank={bank}/>
              bankRows.push(bankRow)
            })   
            this.setState({rows: bankRows})     
          },
        error: (xhr, status, err)=>{
          console.error("Failed to fetch data")

        }
    })
  }
  searchChangeHandler(event){
    const boundObject=this
    const searchTerm=event.target.value.toUpperCase()
    boundObject.performSearch(searchTerm)
  }
  render(){
  return (
    <div>
      <table className="titleBar">
        <tbody>
          <tr>
            <td>
              <h1>Bank Search</h1>
            </td>
          </tr>
        </tbody>
      </table>

      <select className="broad-input" onChange={this.searchChangeHandler.bind(this)}>
    <option value="Choose">Choose</option>
    <option value="#">#</option>
    <option value="#">##</option>
    </select> 
      {this.state.rows}


    </div>
  );
}
}
export default App;

Answer 1

This question was asked before.

You can use this component, example below:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
import ReactPaginate from 'react-paginate';
import $ from 'jquery';

window.React = React;

export class CommentList extends Component {
  static propTypes = {
    data: PropTypes.array.isRequired,
  };

  render() {
    let commentNodes = this.props.data.map(function(comment, index) {
      return <div key={index}>{comment.comment}</div>;
    });

    return (
      <div id="project-comments" className="commentList">
        <ul>{commentNodes}</ul>
      </div>
    );
  }
}

export class App extends Component {
  static propTypes = {
    url: PropTypes.string.isRequired,
    author: PropTypes.string.isRequired,
    perPage: PropTypes.number.isRequired,
  };

  constructor(props) {
    super(props);

    this.state = {
      data: [],
      offset: 0,
    };
  }

  loadCommentsFromServer() {
    $.ajax({
      url: this.props.url,
      data: { limit: this.props.perPage, offset: this.state.offset },
      dataType: 'json',
      type: 'GET',

      success: data => {
        this.setState({
          data: data.comments,
          pageCount: Math.ceil(data.meta.total_count / data.meta.limit),
        });
      },

      error: (xhr, status, err) => {
        console.error(this.props.url, status, err.toString()); // eslint-disable-line
      },
    });
  }

  componentDidMount() {
    this.loadCommentsFromServer();
  }

  handlePageClick = data => {
    let selected = data.selected;
    let offset = Math.ceil(selected * this.props.perPage);

    this.setState({ offset: offset }, () => {
      this.loadCommentsFromServer();
    });
  };

  render() {
    return (
      <div className="commentBox">
        <CommentList data={this.state.data} />
        <ReactPaginate
          previousLabel={'previous'}
          nextLabel={'next'}
          breakLabel={'...'}
          breakClassName={'break-me'}
          pageCount={this.state.pageCount}
          marginPagesDisplayed={2}
          pageRangeDisplayed={5}
          onPageChange={this.handlePageClick}
          containerClassName={'pagination'}
          subContainerClassName={'pages pagination'}
          activeClassName={'active'}
        />
      </div>
    );
  }
}

ReactDOM.render(
  <App url={'http://localhost:3000/comments'} author={'adele'} perPage={10} />,
  document.getElementById('react-paginate')
);