title: Render data array as paginated components
body: <p>I'm new to React so please forgive me if I get the terminology wrong.</p>
  
  <p>I want to create a way of paginating an array of components. To that effect, I have sliced the array by the required amount of items per page and stored each page into a ne array, eg:</p>
  
  <pre><code>const limit = 4
  const numPages = 20
  let pagewrapper = []
  
  for (let i = 0; i &lt; numPages; i++) {
  
    let start = i * limit
    let end = start + limit
  
    let pageItems = children.slice(start, end)
  
    // Skip first array push as 'page 1' is already showing.
    if (end != limit) {
      pagewrapper.push(&lt;Grid gridContainerStyles={'grid-page__' + i} items={pageItems} /&gt;)
    }
  }
  </code></pre>
  
  <p>I then created a simple button to reveal each page at a time.</p>
  
  <pre><code>    &lt;Button
        onClick={this.pagerHandleClick}
      &gt;
        {'Show more'}
      &lt;/Button&gt;
  </code></pre>
  
  <p>With the handler looking like:</p>
  
  <pre><code>  pagerHandleClick() {
      this.setState(state =&gt; ({
        page: state.page + 1,
      }))
    }
  </code></pre>
  
  <p>But from here I am kind of stuck. I don't know how to tell each <code>&lt;Grid /&gt;</code> to reveal it's self. All the solutions I Google seem to indicate wrapping the component in an if statement, but it seems odd to wrap each array item in it's own if statement.</p>
  
  <p>In the past I would've done this in Vanilla JS or JQuery with a simple <code>getElementByClass.</code> But I don't know if that's achievable in React this way.</p>
  
  <p>Would anyone be able to point me in the right direction here?</p>
  
  <p>Many thanks</p>