CODEWITHSUNDEEP
javascriptreactjs
Mark James
Mark James

Reputation: 558

Cannot update state from child component

State of pagination component I move into parent component.

On page change in pagination currentPage state should be updated, but now it's not.

When currentPage - state was local it was work on this way:

class Pagination extends React.Component {

   state = {
      currentPage: 1,
    };

  componentDidMount() {
    this.gotoPage(1);
  }

  gotoPage = (page) => {
    const { onPageChanged = (f) => f } = this.props;
    const { totalPages, totalRecords } = this.state;

    const currentPage = Math.max(0, Math.min(page, totalPages));
    const paginationData = {
      currentPage,
      totalPages,
      totalRecords
    };
    this.setState({ currentPage }, () => onPageChanged(paginationData));
  };

In that case state was updated.

Now I pass down updatePaginationPage function to update state:

 gotoPage = (page) => {
    const { updatePaginationPage } = this.props;
    const { totalPages } = this.state;

    const currentPage = Math.max(0, Math.min(page, totalPages));

    () => updatePaginationPage(currentPage);
  };

This is how looks updatePaginationPage function:

 updatePaginationPage = (currentPage) => {
    this.setState({ currentPage }, () => this.onPageChanged(currentPage));
  };

Looks the same as before but state is not updated.

Why state is not updated?

Upvotes: 0

Views: 74

Answers (1)

Maksym Bezruchko
Maksym Bezruchko

Reputation: 1258

Change:

gotoPage = (page) => {
    ...
    () => updatePaginationPage(currentPage);
};

to:

gotoPage = (page) => {
    ...
    updatePaginationPage(currentPage);
};

Upvotes: 4

Related Questions