Reputation: 63
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
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