question-mark

Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

forcePage doesn't work

See original GitHub issue

Issue Description

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?

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:30 (1 by maintainers)

github_iconTop GitHub Comments

7reactions
NourEldin275commented, Sep 8, 2017

@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.

4reactions
rus-yurchenkocommented, Oct 26, 2017

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

React Paginate Second Instance on same page does not re ...
To make both paginations work in sync - you have to set forcePage to be equal to the wrapper's state selected page numer....
Read more >
react-paginate - npm
Name Type Description pageCount Number Required. The total number of pages. pageRangeDisplayed Number The range of pages displayed. marginPagesDisplayed Number The number of pages to display...
Read more >
Update not working for Visual Force Page fields
Looks like the Id of current page not retrieved for update operation. I am using this to update the record. ApexPages.currentPage().
Read more >
visual force page not working when made public
Don't have an account? Signup for a Developer Edition. Browse by Topic. Apex Code Development (89281) ...
Read more >
How to Refresh a Page or Component in React - Upmostly
React is a modern JavaScript library and therefore does not require a page refresh to display the latest data in the UI. A...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found