Active Page Number Not Reset

[ranthaboy]

Hi i use this to implement "Search Function" on my app
but it won't reset the active number to first page whenever i request new chunk of data
For example:
On First data loading i have 10 pages and then i move to second page,
the active class is moved to second page.
after that i do a search request and get 5 pages, the pageCount is reset,
but the active class is still on the second page, not reset to first page

This is the version i use
"react-paginate": "^5.1.0"

Thank you

[prakharcipher]

I'd like to fix this. Kindly guide me how to go with the code.

[MonsieurV]

Seems you need to switch the page number from uncontrolled to controlled. In the first case you only indicate the initial page (with the initialPage prop) when in the latter you use the forcePage prop to always control the page number.

This imply you manage yourself the page number state.

For e.g.:

import ReactPaginate from 'react-paginate';

class PaginatedList extends React.Component {
  state = {
    pageNumber: 0,
    results: [],
    searchInput: ''
  }
  fetchResults () {
    const results = []; // fetch ... using this.state.searchInput as filter.
    this.setState({ results });
  }
  render () {
    return (
      <div>
        <input type="text" onChange={(e) => { this.setState({ searchInput: e.target.value }); }} />
        <button onClick={this.fetchResults.bind(this)}>Search</button>
        // Results here...
        <ReactPaginate
          pageCount={this.state.results.length}
          forcePage={this.state.pageNumber}
          onPageChange={(pageNumber) => { this.setState({ pageNumber }); }}
          // ...
          />
     </div>
    );
  }
}

[Detachment]

Look into source code:

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

We can know that if the forcePage number still the same, the page will re-render, but won't change. So when you do your search function, you should reset the forcePage number. In my case, I reset the forcePage number by comparing request payload( when do search function, my payload will change):

class Pagination extends Component {
  constructor(props) {
    super(props)
    this.state = {pageNumber: 0}
  }
    componentWillReceiveProps(nextProps) {
        let pre = JSON.stringify(this.props.payload)
        let next = JSON.stringify(nextProps.payload)
        if (pre !== next) {
          this.setState({pageNumber: 0})
        }
      }
    
    render(){
        let {pageNumber} = this.state
        return(
            <ReactPaginate previousLabel={"<"}
                         nextLabel={">"}
                         breakLabel={<a className="skip" href="">...</a>}
                         breakClassName={"break-me"}
                         pageCount={pageCount}
                         marginPagesDisplayed={pagesDisplayed}
                         pageRangeDisplayed={rangeDisplayed}
                         onPageChange={this.handlePageClick}
                         forcePage={pageNumber}/>
        )
    }

}

[iway1]

@Detachment Doesn't work in all cases. If i do forcePage={1} the component will still change the active class some times if I press on one of the other list items. There is a race condition that has not been solved here. It's really just poor initial design, the page should be a required prop so that issues like this never happen. Uncontrolled components are just bad, they lead to errors, and this is a great example of why they shouldn't be used.

It's just really disappointing to see an open source library with 200k weekly downloads be both designed poorly and not functioning properly.

[MonsieurV]

Hi @iway1, do you have a MWE to reproduce the issue?
Can you at least give a trace of the props you're providing at each step for the bug to appear?

The only concurrent case I see right now in re-reading the code is providing an initialPage and doing a complete re-render (demounting/remounting) of the component, which would cause the initialPage to be used instand of forcePage.

See

react-paginate/react_components/PaginationBoxView.js

Line 67 in 904bb1d

let initialSelected;

It's just really disappointing to see an open source library with 200k weekly downloads be both designed poorly and not functioning properly.

That's certainly deceiving - certainly, also, that can be fixed. Anyway the number of downloads is no proof of good design.

[ghoul-keeper]

Good work around, thank you! For those wondering I just wrapped the components in a div with a changeable key.

  const [remountComponent, setRemountComponent] = useState(0);

<div key={remountComponent}>
  <Items />
  <ReactPaginate .../>
</div>

And then update that state when I need to remount and go back to the first page.

    setRemountComponent(Math.random());

Thanks!

[jermwatt]

Good work around, thank you! For those wondering I just wrapped the components in a div with a changeable key.

  const [remountComponent, setRemountComponent] = useState(0);

<div key={remountComponent}>
  <Items />
  <ReactPaginate .../>
</div>

And then update that state when I need to remount and go back to the first page.

    setRemountComponent(Math.random());

Thanks!

Great idea!