I have a child component which fires function `pageChange` when I press `2` button in the pagination bar:

```
import React from "react";
import "antd/dist/antd.css";
import { Pagination } from "antd";

const Child = props => {
  function pageChange(pageNumber) {
    props.pageChange(pageNumber);
    console.log("Page child: ", pageNumber);
  }

  return (
    <div>
      <Pagination
        defaultCurrent={1}
        total={50}
        onChange={pageChange}
      />
    </div>
  );
};

export default Child;

```

This child is used in the Parent class component:

```
import React, { Component } from "react";
import Child from "./Child";

class Parent extends Component {
  state = {
    pageIndex: 3
  };

  componentDidMount() {
    this.getSetData(this.state.pageIndex);
  }

  getSetData(pageNumber) {
    this.setState({
      pageIndex: 5
    });
    console.log("Page state: ", this.state.pageIndex);
    console.log("pageNumber: ", pageNumber);
  }

  pageChange(pageNumber) {
    console.log("Page parent: ", pageNumber);
    this.getSetData(pageNumber);
  }

  render() {
    return (
      <div className="container">
        <Child pageChange={this.pageChange} />
      </div>
    );
  }
}

export default Parent;

```

But I have troubles with it:

1. When I press `2` button I get an error `this.getSetData is not a function`. How to call `getSetData` from `pageChange`?
2. Statement `this.setState({pageIndex: 9});` do not works during `componentDidMount` call. Why?

**SOLVED**

1. As far as I understand a function without an arrow has its own `this`. So one must use

```
pageChange = pageNumber => {
    this.getSetData(pageNumber);
  };

```

instead of

```
pageChange(pageNumber) {
    this.getSetData(pageNumber);
  }

```

2. `setState` is async, so to see change in console is useful to call from `render`

```
  render() {
    console.log("render ", this.state.pageIndex);
    return (
      <div className="container">
        <Child pageChange={this.pageChange} />
      </div>
    );
  }

```