title: React js Node API pagination not displaying the second set of data on next click
body: <p>I'm implementing react js table pagination for table of data coming from the Mysql database. Here in my database 13 columns are there on the first time i need to display 5 columns and clicking on next it should display next 5 and so on.</p>
  <p><strong>React code:</strong></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, {
    Component
  } from "react";
  import 'bootstrap/dist/css/bootstrap.min.css';
  import {
    Container,
    Row,
    Form,
    FormGroup,
    FormControl,
    Button,
    FormLabel,
    Alert,
    Table
  } from "react-bootstrap"
  import Pagination from "react-js-pagination";
  
  
  class EditBox extends Component {
  
    constructor(props) {
      super(props);
      this.state = {
        title: "",
        content: "",
        name: "",
        records: [], //data
        showAlert: false,
        alertMsg: "",
        alertType: "sucess",
        activePage: 1,
        itemsCountPerPage: 1,
        activePage: 15,
        totalItemsCount: 1,
        totalcount: "",
        page: 1,
        page_size: ""
      };
  
      this.handlePageChange = this.handlePageChange;
    }
  
  
  
    handleChange = (evt) =&gt; {
      this.setState({
  
        [evt.target.name]: evt.target.value,
      });
  
    };
  
    componentWillMount() {
      this.fetchAllRecords();
    }
  
    handlePageChange(pageNumber) {
      console.log(`active page is ${pageNumber}`);
      this.setState({
        activePage: pageNumber
      });
    }
  
  
    fetchAllRecords = () =&gt; {
      var headers = new Headers();
      headers.append("Content-Type", "application/json");
      fetch(`http://localhost:5001/viewtable?page=${5}&amp;page_size=${0}`, {
          method: "GET",
          headers: headers,
        })
        .then((response) =&gt; response.json())
        .then((result) =&gt; {
          console.log("resultt", result.totalcount);
          this.setState({
            records: result.response,
            totalcount: result.totalcount,
          });
  
        })
        .catch((error) =&gt; console.log("error", error));
    };
  
    render() {
      return ( &lt;
        div &gt;
        &lt;
        Container &gt; {
          this.state.showAlert === true ? ( &lt;
            Alert variant = {
              this.state.alertType
            }
            onClose = {
              () =&gt; {
                this.setState({
                  showAlert: false,
                });
              }
            }
            dismissible &gt;
            &lt;
            Alert.Heading &gt; {
              this.state.alertMsg
            } &lt; /Alert.Heading&gt; &lt; /
            Alert &gt;
          ) : null
        }
  
        { /* All Records */ } &lt;
        Row &gt;
        &lt;
        h2 &gt; Content Table &lt; /h2&gt; &lt;
        Table striped bordered hover size = "sm" &gt;
  
        &lt;
        thead &gt;
        &lt;
        tr &gt;
        &lt;
        th &gt; id &lt; /th&gt; &lt;
        th &gt; Title &lt; /th&gt; &lt;
        th &gt; Content &lt; /th&gt; &lt;
        th &gt; Action &lt; /th&gt; &lt; /
        tr &gt; &lt;
        /thead&gt;
  
        &lt;
        tbody &gt;
  
        {
          this.state.records.map((record) =&gt; {
            return ( &lt;
              tr &gt;
              &lt;
              th &gt; {
                record.id
              } &lt; /th&gt; &lt;
              th &gt; {
                record.title
              } &lt; /th&gt; &lt;
              th &gt; {
                record.content
              } &lt; /th&gt;
  
              &lt;
              /tr&gt;
  
            );
          })
        } &lt;
        /tbody&gt; 
  
  
        &lt;
        /Table&gt;
  
        &lt;
        /Row&gt;
  
        &lt;
        div &gt; &lt; Pagination activePage = {
          this.state.activePage
        }
        itemsCountPerPage = {
          5
        }
        totalItemsCount = {
          this.state.totalcount
        }
        onChange = {
          this.handlePageChange.bind(this)
        }
        /&gt; &lt; /
        div &gt;
  
  
        &lt;
        Row &gt;
        &lt;
        Form &gt;
        &lt;
        FormGroup &gt;
        &lt;
        FormLabel &gt; Enter Title &lt; /FormLabel&gt; &lt;
        FormControl type = "text"
        name = "title"
        placeholder = "Enter Title"
        onChange = {
          this.handleChange
        }
        value = {
          this.state.title
        } &gt; &lt; /FormControl&gt; &lt; /
        FormGroup &gt; &lt;
        FormGroup &gt;
        &lt;
        FormLabel &gt; Enter Content &lt; /FormLabel&gt; &lt;
        FormControl type = "text"
        name = "content"
        placeholder = "Enter Content"
        onChange = {
          this.handleChange
        }
        value = {
          this.state.content
        } &gt; &lt; /FormControl&gt; &lt; /
        FormGroup &gt; &lt;
        /Form&gt; &lt; /
        Row &gt; &lt;
        /Container&gt; &lt; /
        div &gt;
      );
    }
  
  
  }
  
  export default EditBox</code></pre>
  </div>
  </div>
  </p>
  <p>Here i only added the part for fetch records from the database and display.</p>
  <p>The issue i'm facing is i can't display the next columns after the first 5 columns on next click. I need to change the code in such a way that on next click it should display next 5 datas. I need to do it dynamically without using hooks concept.</p>
  <p>Here is the API call im using with the LIMIT and OFFSET</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>app.get('/viewtable', (req, res) =&gt; {
    console.log('datassss', req.query);
    let sql = `SELECT *FROM table_content LIMIT ${req.query.page} OFFSET ${req.query.page_size} `;
    let query = con.query(sql, (err, result) =&gt; {
      if (err) throw err;
      res.send(JSON.stringify({
        status: 200,
        error: null,
        response: result,
        totalcount: result.length
      }));
    });
  });</code></pre>
  </div>
  </div>
  </p>
  <p>Other than this do i need to add any other query for fetch the data on second click?.</p>
  <p><strong>Table image:</strong>
  <a href="https://i.stack.imgur.com/xb7j8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xb7j8.png" alt="enter image description here" /></a></p>
  <p>Do i need to do any changes on API or front end to display the next page?
  Any suggestions will be helpful for me.</p>