title: React- How can I change the state when I click on a different page?
body: <p>In my program, I have a variety of cards that are put on screen with a picture of a character and information about said character. I am pulling all of this information from an API, and am tasked with doing a client side pagination to display only a few of the cards on screen at a time.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>genCard = () =&gt; {
  
  const { isLoaded, items, currentPage, totalNumberPages, recordsPerPage } = this.state;
  if (isLoaded) {
   let returnCard = [];
   let i;
   for(i = currentPage; i &lt; recordsPerPage; i++) {
    returnCard.push(&lt;Card key={items[i].id} cardName={items[i].name} imgSrc={items[i].image} birthYear={items[i].birth_year}/&gt;);
  
   }
   return returnCard;
  }
  return null;
  </code></pre>
  
  <p>};</p>
  
  <pre><code>  handlePageClick = (data) =&gt; {
      let selected = data.selected;
      let offset = Math.ceil(selected * this.props.perPage);
  this.setState({
  
  })
  </code></pre>
  
  <p>};</p>
  
  <p>As you can see, I'm using a for loop to display only 10 items (cards) on the screen at a time. What I'm trying to do is when you click on another page, I want it to re-render and display the other cards on screen. </p>
  
  <p>So, how can I make this happen? How can I set the state to the page that you click on, so that it renders the correct cards onto the screen?</p>
  
  <p>Thanks in advance for your help. Hopefully that made sense.</p>