React - Class component doesn't receive any params

Question

I have a simple class Component:

class SearchedUserWrapper extends Component {
    constructor(props) {
        super(props);
        this.state = {
            searchedPhrase: "",
            pageNumber: 1
        };
        this.increment = this.increment.bind(this);
    }

    GetUserForSearchResult = (postAmount, pageNumber) => {
        const list = [];
        for (let index = 0; index < postAmount; index++) {
            list.push(<SearchResultUser CurrentPage={pageNumber}></SearchResultUser>);
        }
        return list;
    }

    increment = () => {
        this.setState({ pageNumber: this.state.pageNumber + 1 })
        console.log(this.state.pageNumber + 0);
    }

    render() {
        return (<div>
            {this.GetUserForSearchResult(5, this.props.pageNumber)}
            <Button onClick={this.increment}> Current page {this.state.pageNumber}</Button>
        </div>);
    }
}

and function GetUserForSearchResult receives a state from SearchUserWrapper class. My SearchResultUser looks like this:

class SearchResultUser extends Component {

    render() {
        {console.log(this.props.CurrentPage)}
        return (
            <div className="user-searchresult">
                {this.props.CurrentPage}
            </div>);
    }
}

export default SearchResultUser;

And console log says that this props are undefined, and the div is empty.

My goal is to have the effect that everytime I click "Current page" button, to refresh all the SearchResultUser component so that it displays a state passed as parameter. What am I doing here wrong? Why does it says to be undefined?

EDIT: I tried couple of things and discovered something.

If I send the state in the params directly, for example:

    render() {
        return (<div>
            <SearchResultUser CurrentPage={this.state.pageNumber}></SearchResultUser>
        </div>

It seems to work, but the order of sending the state to the function, which passes it to params of component doesn't work.

  GetUserForSearchResult = (postAmount, pageNumber) => {
        const list = [];
        for (let index = 0; index < postAmount; index++) {
            list.push(<SearchResultUser CurrentPage={pageNumber}></SearchResultUser>);
        }
        return list;
    }

    render() {
        return (<div>
            <SearchResultUser CurrentPage={this.state.pageNumber}></SearchResultUser>
        </div>);

Can somebody explain why is it happening like this?

Answer 1

Edit:

In this place(below) I think you have to pass state instead of props, because the main component(SearchedUserWrapper) doesn't receive any props, so this is undefined.

{this.GetUserForSearchResult(5, this.props.pageNumber)}

https://codesandbox.io/s/stackoverflow-71594634-omvqpw

---

First message:

Did you check if the page number was updated? If the next state depends on the current state, the doc of react recommend using the updater function form, instead:

this.setState((state) => {
  return {quantity: state.quantity + 1};
});

You should call super(props) before any other statement. Otherwise, this.props will be undefined in the constructor at SearchResultUser

---