react-paginate: forcePage doesn't work

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

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

componentWillReceiveProps(nextProps) {
    if (typeof(nextProps.forcePage) !== 'undefined' && this.props.forcePage !== nextProps.forcePage) {
      this.setState({selected: nextProps.forcePage});
    }
  }

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.

• Set the parent components page number state as null to begin with, and pass this down to the react paginate component in the forceState prop.
• When you want to reset it again, update the state as usual in the parent component (if resetting the pagination to the start, still set the state to 0). Because 0 !== null, it will update the pagination component.

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:

  let forcePageObj = {}
  if (props.page === 0) {
    forcePageObj['forcePage'] = 0
  }

  return (
      <ReactPaginate
        onPageChange={handlePageChange}
        pageRangeDisplayed={3}
        marginPagesDisplayed={1}
        {...forcePageObj}
        pageCount={props.nbPages}
      />
  )

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 several setStates. Thanks for the answer!

Btw, looks like this issue can be closed.

forcePage works for me with version 4.4.3

@karthikiyengar I’ve the following configuration

render() {
	console.log(this.props);
	return <div className="m-pagination">
		<ReactPaginate previousLabel={"Previous"}
			nextLabel={"Next"}
			breakLabel={<span>...</span>}
			breakClassName={"page-numbers dots"}
			pageCount={this.props.pageCount}
			marginPagesDisplayed={2}
			pageRangeDisplayed={2}
			onPageChange={this.handlePageClick}
			forcePage={this.props.initialPage}
			initialPage={this.props.initialPage}
			containerClassName={"page numbers"}
			subContainerClassName={""}
			disabledClassName="disabled"
			hrefBuilder={this.hrefBuilder}
			activeClassName={"current"}
			disableInitialCallback={this.disableInitialCallback}/>
	</div>;
}

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.