title: Pagination with React from JSON data issue
body: <p><br>
  I'm stucked into a newbie problem for reactJS(I've started to learn last week). I'm developing a single page application that renders a search result from the Google Book API, and everything looks great, I can fetch the data from the api (actually right now im using AJAX).</p>
  
  <p>None what I've tried in the last 8 hours seens to work to update the state in my <a href="https://www.npmjs.com/package/react-paginate" rel="nofollow noreferrer">react-paginate</a> component. <strong>Probably</strong> the problem is in my handlePageClick function, but the documentation of this module is a little bit odd plus my unfamiliarity with react are making things harder.</p>
  
  <p>So here's my <strong>app.js</strong></p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import { compose } from 'redux';
  import {
    cloneDeep, findIndex, orderBy, keys, values, transforms
  } from 'lodash';
  import Bookshelf from './bookshelf.js';
  import ReactPaginate from 'react-paginate';
  
  import Header from './layout/header.js';
  import Footer from './layout/Footer.js';
  import Books from './layout/Books.js';
  // import {Paginator, paginate } from './helpers';
  
  const app = document.getElementById('app');
  
  
  
  export default class Main extends React.Component{
    constructor(props){
      super(props);
  
      this.state = {
        items:[],
        offset:0
      };
  
      this.localSubmit = this.localSubmit.bind(this);
      this.onPerPage = this.onPerPage.bind(this);
  
      this.handlePageClick = this.handlePageClick.bind(this);
  
    }
  
  
    localSubmit(search) {
  
      this.setState({items: []});
      var component = this;
  
      $.get("https://www.googleapis.com/books/v1/volumes?q=intitle:" + encodeURIComponent(search) + "&amp;printType=books&amp;orderBy=newest&amp;maxResults=39", function (data) {
  
        component.setState(data);
        Bookshelf();
  
        $(".front").css("background", "url(../img/no_book_cover.jpg)");
  
        for (var i = 0; i &lt; component.state.items.length; i++) {
          if (component.state.items[i].volumeInfo.imageLinks != null) {
  
            $("#book-" + component.state.items[i].id).find(".front").css("background", "url("+ component.state.items[i].volumeInfo.imageLinks.thumbnail +")");
          }
        }
  
  
        $(".front").css("background-size", "100% 100%");
        $(".front").css("border", "2px solid #eee");
        $(".front").css("background-size", "100% 100%");
  
  
      });
    }
  
    handlePageClick(component){
      console.log(component);
      let selected = component.selected;
      let offset = Math.ceil(selected * this.props.perPage);
      console.log("the offset is:"+offset)
      this.setState({offset: offset}, () =&gt; {
        // this.localsubmit
      });
    }
  
    onSelect(page) {
      const pages = Math.ceil(
        this.state.items.length / 9
      );
  
      console.log(pages);
  
      this.setState({
        pagination: {
          perPage:this.state.pagination,
          page: Math.min(Math.max(page, 1), pages)
        }
      });
    }
    onPerPage(value) {
      this.setState({
        pagination: {
          page:this.state.pagination,
          perPage: parseInt(value, 10)
        }
      });
    }
    render () {
      const pages = Math.ceil(
        this.state.items.length / 9
      );
      console.log("length:"+this.state.items.length);
      console.log(pages);
      var books = [];
      var content;
  
      books = this.state.items.map(function(book) {
        return &lt;Books key={book.id} item={book.volumeInfo} identifier={book.id} /&gt;;
      });
  
      if (books.length &gt; 0) {
        content = books;
      } else {
        content = &lt;div className="search-icon" &gt;&lt;span className="glyphicon glyphicon-search"&gt;&lt;/span&gt;&lt;/div&gt;
      }
  
      return (
        &lt;div&gt;
        &lt;Header localSubmit={this.localSubmit}/&gt;
          &lt;div className="main"&gt;
                  &lt;div id="bookshelf" className="bookshelf"&gt;
              {content}
            &lt;/div&gt;
            &lt;ReactPaginate previousLabel={"previous"}
                 nextLabel={"next"}
                 breakLabel={&lt;a href=""&gt;...&lt;/a&gt;}
                 breakClassName={"break-me"}
                 pageCount={this.state.pageCount}
                 marginPagesDisplayed={2}
                 pageRangeDisplayed={5}
                 onPageChange={this.handlePageClick}
                 containerClassName={"pagination"}
                 subContainerClassName={"pages pagination"}
                 activeClassName={"active"} /&gt;
          &lt;/div&gt;
          &lt;Footer /&gt;
        &lt;/div&gt;
      );
  
    }
  
  }
  
  ReactDOM.render(&lt;Main  perPage={10}/&gt;, document.getElementById("app"));
  </code></pre>
  
  <p>And this is another relevant component, the <strong>books</strong> class</p>
  
  <pre><code>import React from "react";
  import ReactDOM from 'react-dom';
  
  
  var Books = React.createClass({
  
    getInitialState : function () {
      return ({});
    },
    componentDidMount : function () {
  
      if (this.props.item != null) {
        this.setState(this.props.item);
      }
  
  
    },
    render : function () {
  
      var authors = "";
      console.log(this.props.item);
  
      if (this.state.authors != null) {
        for (var i = 0; i &lt; this.state.authors.length; i++) {
  
          if (i &gt; 1) {
            authors = ", " + this.state.authors[i];
          } else {
            authors = this.state.authors[i];
          }
        }
      }
  
      var descrip = "...";
  
      if (this.state.description != null) {
        descrip = this.state.description.substring(0, 180) + "...";
      }
  
      var id = "";
  
      if (this.props.identifier != null) {
        id = "book-" + this.props.identifier;
      }
  
      return (
  
        &lt;figure&gt;
          &lt;div className="book" id={id}&gt;&lt;/div&gt;
          &lt;div className="buttons"&gt;&lt;a href={this.state.previewLink} target="_blank"&gt;Preview&lt;/a&gt;&lt;a href="#"&gt;Details&lt;/a&gt;&lt;/div&gt;
          &lt;figcaption&gt;&lt;h2&gt;{this.state.title}&lt;span&gt;{authors}&lt;/span&gt;&lt;/h2&gt;&lt;/figcaption&gt;
          &lt;div className="details"&gt;
            &lt;ul&gt;
              &lt;li&gt;{descrip}&lt;/li&gt;
              &lt;li&gt;{this.state.publishedDate}&lt;/li&gt;
              &lt;li&gt;{this.state.publisher}&lt;/li&gt;
              &lt;li&gt;{this.state.pageCount} pages&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/figure&gt;
  
      );
    }
  
  });
  
  export default Books;
  </code></pre>
  
  <p>I've already tried another modules for paginate in react without success, and this one looks the easier, but there's something missing, could you guys help me?</p>
  
  <p>Error:
  When I click in the next page i got this <code>Cannot read property 'perPage' of undefined</code> and in <code>page 1</code> the whole content are being displayed, the react-paginate filtering actually it's not working.</p>
  
  <p>Edit 2: 
  I've uncommented the line of      <code>this.handlePageClick = this.handlePageClick.bind(this);</code> inside the constructor but still getting no filter, and now i don't get any errors, this is driving me crazy =( </p>
  
  <p>Thanks in advance!</p>