title: Building Pagination in Reactjs
body: <p>So the way I am building pagination in Reactjs is a bit odd, but it works for me, I, How ever would like to say <em>show me the first 5 (1-5) on the 5th page show me 5-max</em>. But I am unclear on how to do that.</p>
  
  <p>this is what I currently have:</p>
  
  <pre><code>  render: function() {
      // Do we have more then one page?
      if (this.props.maxPages &gt; 0){
  
        // We have to add one to the max pages that come back.
        var pageLink = this.props.maxPages + 1;
        var currentPage = this.props.currentPage;
        var liElements = []
  
        // Build [&lt;&lt;][&lt;] for the user.
        if (pageLink &gt; 1) {
          liElements.push(&lt;li&gt;&lt;a href="#posts?page=1"&gt;&amp;#60;&amp;#60;&lt;/a&gt;&lt;/li&gt;);
          liElements.push(&lt;li&gt;&lt;a href={this.pageSubtraction(currentPage, pageLink)}&gt;&amp;#60;&lt;/a&gt;&lt;/li&gt;);
        }
  
        // Build the individual [x][y][z] links.
        for (var i = 1; i &lt;= pageLink; i++) {
          liElements.push(&lt;li key={i} id={i}&gt;&lt;a href={"#posts?page="+i}&gt;{i}&lt;/a&gt;&lt;/li&gt;);
        }
  
        // Build the [&gt;][&gt;&gt;] for the user.
        if (pageLink &gt; 1) {
          liElements.push(&lt;li&gt;&lt;a href={this.pageAddition(currentPage, pageLink)}&gt;&amp;#62;&lt;/a&gt;&lt;/li&gt;);
          liElements.push(&lt;li&gt;&lt;a href={"#posts?page="+pageLink}&gt;&amp;#62;&amp;#62;&lt;/a&gt;&lt;/li&gt;);
        }
  
        return (&lt;ul className="pagination"&gt;{liElements}&lt;/ul&gt;);
      }else{
        // Return nothing.
        return ( &lt;div&gt;&lt;/div&gt; );
      }
    }
  </code></pre>
  
  <p>This will build me <code>[&lt;&lt;][&lt;][1][2][3] ... [&gt;][&gt;&gt;]</code> which is great but their is no limit on it.</p>
  
  <p>At this time:</p>
  
  <ul>
  <li><code>pageLink = 6</code> (the max number of pages - I know horrible variable name)</li>
  <li><code>currentPage = 1</code> (the current page you are on)</li>
  </ul>
  
  <p>So what I need is:</p>
  
  <p><code>[&lt;&lt;][&lt;][1][2][3][4][5][&gt;][&gt;&gt;]</code> Select Page 5 <code>[&lt;&lt;][&lt;][5][6][&gt;][&gt;&gt;]</code> But I am not sure if my current set up will allow me to do that.</p>