Bootstrap Pagination in ReactJS

I am trying to follow this tutorial to create a pagination in my application https://www.npmjs.com/package/react-js-pagination#usage . The pagination part works fine. How to create previousPageClick, nextPageClick functions for the course component so the page will display different set of records based on the page number? Thanks.

My App.js code:

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"));

Course.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;