Reactでpropsの受け渡しができません。

Question

###reactとrailsでリストの作成を行なっています
railsで作成したjsonファイルをreactでajaxで受け取って、それを一覧として表示させるページを作成しています。表示させるまではできたのですが、ページネーションを導入しようとしたところ下記のエラーが発生しました。
###発生している問題・エラーメッセージ
reactでajaxで受け取って、それをsetStateしてthis.state.dataの形でpropsとして子コンポーネントに受け渡そうとしているのですが、子コンポーネントでthis.state.dataのデバッグをすると空の配列が返ってきます。

###該当のソースコード

componentDidMount() {
    const url = location.href + '.json';
    $.ajax({
      url: url,
      dataType: 'json',
      cache: false,
      success: (data) => {
        this.setState({data: data});
      },
      error: (xhr, status, err) => {
        console.error(url, status, err.toString());
      },
    });
  }
render() {
  userNodes = this.state.data.map(item => {
    return(
    ...
      <UserList name={item.name} />
    ...
    );
  }); 
  return(
    ...
    {userNodes} //表示される
    <Pagination data={this.state.data} onChangePage={this.onChangePage} /> //デバッグしてみるとそもそもPagiNationコンポーネントにpropsとしてstateのデータが渡されてない
    ...
);
}

###試したこと
reactのLifeCycle等も調べてみましたが、片方にはデータが渡りもう片方にはデータが渡らないということが理解できません。

Answer 1

ちなみに<Pagination>の上か下に

<div data={this.state.data}> data dump</div> などと書いた場合、想定どおりに展開されますか？

Comments

[dragon_taro]

回答ありがとうございます。結局、ライブラリーを用いて実装することにしました。せっかく回答していただいたのに申し訳ありません。