react-paginate: 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?
About this issue
- Original URL
- State: closed
- Created 7 years ago
- Comments: 30 (1 by maintainers)
@kevinch I simply do this
And the
currentPage
gets updated with each page click. And when I want to, I set it to0
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 toselected
value from theonPageChange
handler that you pass to React Paginate like so: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.
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.
I’m using ^4.3.1, but still forcePage doesn’t work.
Looking at the source code
It looks like forcePage doesn’t work if parent props don’t change, which looks like bad design for me.
Shouldn’t the component itself prevent page change (visually) when forcePage props is passed?
I had an issue with using forcePage to control the state from the parent component where, like the above problems, it wasn’t updating the state with the new page number.
In my case specifically, for my search parent component, I wanted it to reset the page number every time a search was done. The main issue is however, I set the state (that was passed down in the props) in the parent component as 0, instead of null. Because the only other time I was updating the props (and not the internal state), it was also setting the react-paginate
forceState
props as 0 again, which led the component to think there was no need to re-render.So in short.
forceState
prop.I just ran into this problem. When sorting a list of objects, I want to go back to page 1 (index 0). So I am using state to save that but it is no longer working. It was working like a month ago
Dude just do it:
Like @sami616 did: https://github.com/AdeleD/react-paginate/issues/9#issuecomment-416545421
https://github.com/AdeleD/react-paginate/issues/198 This issue has been solved
I was messing up my
forcePage
via severalsetState
s. Thanks for the answer!Btw, looks like this issue can be closed.
forcePage
works for me with version4.4.3
@karthikiyengar I’ve the following configuration
My issue is the following:
A user navigates top page three. Then he changes the number of posts displayed from 10 to 20. I would want the component to reset itself to page one but it remains on page 3. pageCount is updated correctly and it’s reflected in the component, but I can’t force page 1.