title: Select rows issue in pagination react table
body: <p>I've made a table with one column as checkbox to select that row. So if the user checks this row's checkbox, I'll add <code>isChecked : true</code> property in state and on uncheck will change <code>isChecked: false</code> of that in state. Each page is having 10rows. The issue is when I checked the 1st row checkbox of 1st page and when I go to <code>Next Page</code> somehow the 1st row of next page checkbox also appears checked. However only 1st row is set to true in state. Whats the issue? What wrong I'm doing can anyone tell? Thanks in advance!</p>
  <pre><code>import React,{Component} from 'react';
  import { Table,Button,Input } from 'reactstrap';
  import SelectedUsers from './SelectedUsers';
  import { yellow } from '@material-ui/core/colors';
  import Icon from '@material-ui/core/Icon';
  
  class Users extends Component {
      constructor(props) {
      super(props);
  
      this.state = { 
          users : [],
          pageSize: 10,
          pageIndex: 0,
          selectedUsers : [],
          filterCandidate : '',
          searchVal : &quot;&quot;
       };
  }
  componentDidMount() {
      const userLink = 'api';
      fetch(userLink, {
          method: 'GET'
      })
      .then(res =&gt; res.json())
      .then(data =&gt; {
          this.setState({
              users : data
          })
          console.log(data)
      })
  }
  onSelectUser = (e,i) =&gt; {
      const copy_users = this.state.users.slice() ;
      const checked = e.target.checked
      copy_users[i].isChecked = checked
      this.setState({ copy_users})
  
      // console.log( e.target.value)
  }
  
  
  handlePrevPageClick = (event) =&gt; {
      this.setState(prevState =&gt; ({
        pageIndex: prevState.pageIndex &gt; 0 ? prevState.pageIndex - 1 : 0
      }));
  }
  
  handleNextPageClick = (event) =&gt; {
      this.setState(prevState =&gt; ({
        pageIndex:
          prevState.pageIndex &lt;
          Math.floor(prevState.users.length / prevState.pageSize)
            ? prevState.pageIndex + 1
            : prevState.pageIndex
      }));
  }
  render() {
      let profile = 'Profile Image';
      return (
          &lt;div className=&quot;bets_page&quot;&gt;
              &lt;Table striped responsive&gt;
                      &lt;thead&gt;
                          &lt;tr&gt;
                          &lt;th&gt;Select&lt;/th&gt;
                          &lt;th&gt;Player Name&lt;/th&gt;
                          &lt;th&gt;Level&lt;Icon style={{ color: yellow[800] }} fontSize=&quot;small&quot;&gt;star&lt;/Icon&gt;&lt;/th&gt;
                          &lt;th&gt;Avatar&lt;/th&gt;
                          &lt;th&gt;BET&lt;/th&gt;
                          &lt;th&gt;Wins&lt;Icon style={{ color: yellow[800] }} fontSize=&quot;small&quot;&gt;euro&lt;/Icon&gt;&lt;/th&gt;
                          &lt;th&gt;Lost&lt;/th&gt;
                          &lt;th&gt;Price&lt;/th&gt;
                          &lt;/tr&gt;
                      &lt;/thead&gt;
                      &lt;tbody&gt;
                      {this.state.users.slice(
                              this.state.pageIndex * this.state.pageSize,
                              this.state.pageIndex * this.state.pageSize + this.state.pageSize
                          ).map((data,i) =&gt; (
                              &lt;tr key={i}&gt;
                                  &lt;td&gt;
                                      
                                          &lt;label className=&quot;checkbox&quot;&gt;
                                              &lt;input type=&quot;checkbox&quot; 
                                              checked={data.isChecked} 
                                              key={i} 
                                              value={data.Name}
                                              onChange={(e) =&gt; this.onSelectUser(e,i)}/&gt;
                                          &lt;/label&gt;
                                     
                                  &lt;/td&gt;
                                  &lt;td&gt;{data.Name}&lt;/td&gt;
                                  &lt;td&gt;&lt;/td&gt;
                                  &lt;td&gt;&lt;img src={data[profile]} alt={data.Name} 
                                  className=&quot;avatar&quot;/&gt;&lt;/td&gt;
                                  &lt;td&gt;{data.Bet}&lt;/td&gt;
                                  &lt;td&gt;&lt;/td&gt;
                                  &lt;td&gt;&lt;/td&gt;
                                  &lt;td&gt;{data.Price}&lt;/td&gt;
  
                              &lt;/tr&gt;
                      
                      ))}
             &lt;/tbody&gt;
            &lt;/Table&gt;
         &lt;div&gt;
                      &lt;Button onClick={event =&gt; this.handlePrevPageClick(event)} className=&quot;m-2&quot;&gt;
                      {&quot;&lt;&quot;}
                      &lt;/Button&gt;Page {this.state.pageIndex+1}
                      &lt;Button onClick={event =&gt; this.handleNextPageClick(event)} className=&quot;m-2&quot;&gt;
                      {&quot;&gt;&quot;}
                      &lt;/Button&gt;
                  &lt;/div&gt;
          &lt;/div&gt;
  
      }
    }
  
   export default Users;
  </code></pre>