CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
Sandy McCathy
Sandy McCathy

Reputation: 63

React Change Listener not firing

I know this question has been asked several times, I have tried different solutions so far and none of them seem to work. I am new to React, I am teaching myself, I have a table and a Pagination div at the bottom, the pagination div looks like this 

 <Pagination
  count={response.payLoad.totalPages}
  defaultPage={1}
  page={page}
  variant="outlined"
  shape="rounded"
  onChange={this.handleOnPageChange}
/>

And the handleOnPageChange looks like this 

handleOnPageChange = (event, page) => {
  console.log("Page selected: " + page);
  this.setState({ currentPage: page });
  this.populateTable();
}

The onChange method has two parameters, event, page, the handleOnPageChange method is supposed to catch the event and print a console message that says Page selected+pageNumber and load new data in the table with the populateTable() method but to my surprise nothing happens, not even the console message is printed out, where can I be going wrong?

Pagination is from the material-ui lib

import Pagination from '@material-ui/lab/Pagination';

The populateTable() method

populateTable() {
    this.fetchUsers(this.state.currentPage);
}


 async fetchUsers(page) {
    fetch('/api/v1/users/'+page+'/10')
        .then(response => response.json() )
        .then(data => this.setState({ users: data, loading: false })).catch(); 

}

Upvotes: 2

Views: 151

Answers (1)

Sandy McCathy
Sandy McCathy

Reputation: 63

thanks for the overwhelming response, it turns out the function that renders my table together with my pagination is a static

static renderResults(results){

  <div>
   <table>
    ....
  </table>
 <Pagination
  count={response.payLoad.totalPages}
  defaultPage={1}
  page={page}
  variant="outlined"
  shape="rounded"
  onChange={this.handleOnPageChange}/>
}

Not sure if the same applies to Javascript but in Java you cannot access the this from a Static, I feel that is the reason nothing was happening, the moment I removed it, everything worked just fine.

Upvotes: 1

Related Questions