Change page programmatically

[phaeton2040]

I need to change page programmatically without clicking on certain page label:

Here user will input a page number, press enter and go to it. But if I enter a page number it is not stored in component's variable 'selected', so if I click on next arrow component goes to 2nd page not 6th (see image). That happens because 'clickCallback' is invoked directly in my component. Is there a way to update currently selected page from outside code?

[AdeleD]

Hi @phaeton2040,
You can pass the currently selected page to react-paginate thanks to the prop called forceSelected.

<ReactPaginate clickCallback={this.handlePageClick}
               pageNum={this.state.pageNum}
               forceSelected={4} />

[phaeton2040]

@AdeleD , thnx for the answer. Actually it is already done. But it didn't work because I used version 1.0 where there was no 'shouldComponentUpdate' and because of this setting 'forceSelected' property had no effect on updates. I upgraded to 2.0 and now it works fine! Issue may be closed

[cAstraea]

Hello ,
Is it possible to update the selected page from another component ?
This is the problem I'm having http://recordit.co/TU5Wy2OI5W
I need the starting page to be at 1 when the ProductSearchForm component changes as it now remembers the last page it was on.
How can I approach this?

[petertdinh]

Hi @AdeleD ,

Running into some problems trying to mess with the forceSelected prop. I don't entirely understand it. This is my approach right now.

this.state = { pageNum: 30, currentPage: 0,  forceSelected: 0 };

someMethod() {
  //force it to the first page
  this.setState({forceSelected: 0});
}

handlePageClick= (data) => {
  this.setState({currentPage: data.selected});
}

render() {
  <ReactPaginate clickCallback={this.handlePageClick}
                 pageNum={this.state.pageNum}
                 forceSelected={this.state.forceSelected} />
}

Unfortunately this isn't working for me. What can I do to force the selected page in the parent component?

[nguyenbathanh]

Any implementation for this?

[jraut]

This is an issue if using react-router. If you push a navigation event to /paginated/10 and then cancel it in the route's onEnter (by replace(prevState.location.pathname);) the pagination updates altough forceSelected stays the same.

So selected in state does not follow the changes to forceSelected after handling onPageChange altough it receives new props.

[drellow]

@petertdinh did you ever find a solution or workaround for forcing the page to update within the component?

[WynnL]

For some reason every number but 0 works for the forcePage property. Is it just me or is this a bug?