forcePage doesn't work

If I render this

class MyPagination extends Component {
  constructor() {
    this.state = { currentPage: 0 }
  }

  render() {
    return (
      <ReactPaginate
        pageCount={10}
        pageRangeDisplayed={3}
        marginPageDisplayed={3}
        forcePage={this.state.currentPage}
      />
    )
  }
}

Then click on pages, the selected page changes. I would expect it to stay on page 0

I’d like to perform async actions after page click before having the change reflected. Is this possible given the current configuration options?

[NourEldin275]

@kevinch I simply do this

forcePage={this.state.currentPage}

And the currentPage gets updated with each page click. And when I want to, I set it to 0 and the first page gets selected. For example a reset button click handler or something like that.

Just make sure that currentPage is always set to selected value from the onPageChange handler that you pass to React Paginate like so:

handlePageClick(data){
        let selected = data.selected;
        let offset = Math.ceil(selected * this.props.perPage);

        this.setState({offset: offset, currentPage: selected}, () => {
            //Get your data
        });
}

Note how I set the currentPage: selected in the handler you pass to React Paginate, this is to make sure that the current page is the one the user selected, since we always send a value to forcePage. And then when I need to set a specific page, you update the state object with the page you want and It’ll re-render correctly.

Try this out and let me know if it works for you.

[rus-yurchenko]

Any progress on this? I have a several cases where I need to use forcePage. Cases with undefined by default work only once and then if state doesn’t change nothing happens.