reactjs中的引导分页

我正试图按照本教程在我的应用程序中创建分页 https://www.npmjs.com/package/react-js-pagination#usage . 分页部分工作正常。如何为课程组件创建PreviousPageClick、NextPageClick功能,以便页面根据页码显示不同的记录集?谢谢。

我的app.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"));

JS课程

import React from 'react';
const course=props=>{
return(
    <div className="Course">

        <p>ID: {props.ID}</p>

        <p>SUBJECT: {props.SUBJECT}</p>
    </div>
);
}

export default course;