ReactJS中的Bootstrap分页

Question

我正在尝试按照本教程在应用程序https://www.npmjs.com/package/react-js-pagination#usage中创建分页。分页部分工作正常。如何为课程组件创建previousPageClick，nextPageClick函数，以便页面将根据页码显示不同的记录集？谢谢。

我的App.js代码：

adapter.setOnListIsEmpty(object : OnListIsEmpty{
        override fun onListIsEmpty() {
            //your action
        }
    })

Course.js

import React, { Component } from 'react';
import './App.css';
import axios from 'axios';
import Pagination from "react-js-pagination";
require("bootstrap-less/bootstrap/pagination.less");

class App extends Component {
  constructor() {
    super();
    this.state ={
    courses:[],
    activePage: 15
    };

}


componentDidMount(){
axios.get('myURL')
.then(response=>{
  this.setState({courses:response.data});
 });
}

handlePageChange(pageNumber) {

 this.setState({activePage: pageNumber});
}


render() {
 const courses= this.state.courses.map(course=>(<Course ID={course.ID}  coursename={course.coursetitle} />)); 
   const totalCourses=courses.length;
    return (
      <div className="App">
      <div className="pagination">
      Total Classes: {totalCourses}
      <Pagination
      activePage={this.state.activePage}
      itemsCountPerPage={100}
      totalItemsCount={totalCourses}
      pageRangeDisplayed={5}
      onChange={this.handlePageChange.bind(this)}
        />
      </div>

        <div className="Course">Courses:  {courses}
        </div>
      </div>
    );
  }
}

export default App;

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