CODEWITHSUNDEEP
reactjs
Parvin
Parvin

Reputation: 71

Unable to update the page limit in pagination - React JS?

I am using pagination component from following link, in that I am unable to update pageLimit value based on user selection how many rows will display.

https://scotch.io/tutorials/build-custom-pagination-with-react

https://codesandbox.io/s/competent-river-xneqb

Initially the page limit will be 10. Once the user clicks the button the page limit will be changed to 15. But the paginations page limit is not changing even after updating the component also.

   " import Pagination from "./components/Pagination";

    class App extends Component {
      state = {
        pageLimit : 10
      };

      handlePageLimit = () => {
        this.setState({pageLimit : 15})
        console.log("pagelimit inside fun",this.state.pageLimit)
      }

        return (     
                <div className="d-flex flex-row py-4 align-items-center">
                  <Pagination
                    totalRecords={this.state.totalCountries}
                    pageLimit={this.state.pageLimit}
                    pageNeighbours={1}
                    onPageChanged={this.onPageChanged}
                  />

            <button onClick={this.handlePageLimit}>Click</button>

            </div>
        );"

Please help me to resolve such that when the button clicks the page limit should be changed to 15.

Upvotes: 0

Views: 821

Answers (1)

plamenh
plamenh

Reputation: 131

This guide has so many issues it would be better to just find another ready solution and implement it from scratch. If you want to keep using that you should start here:

Building on Tom Finney's comment, you would need to use componentDidUpdate and then work from there manually updating stuff in your render function:

componentDidUpdate(prevProps) {
    if (prevProps.pageLimit !== this.props.pageLimit) {
      this.pageLimit = this.props.pageLimit;
      this.totalPages = Math.ceil(this.totalRecords / this.pageLimit);
      this.gotoPage(1); // If you want to reset to first page on limit change
    }
  }

Totally not worth the effort.

Upvotes: 1

Related Questions