React: 親コンポーネントから子コンポーネントにデータを渡したい

Question

Reactで親コンポーネントから子コンポーネントに値を渡したいのですが、なかなかうまくできません。

両コンポーネントともClassコンポーネントなのですが、propsを使って受け渡しをしようとすると、子コンポーネントで this.props を呼び出すとpropsが空になってしまいます。
functional componentにする方向ではあまり考えていません。

解決法もしくはよりよい方法があればご教示いただけると幸いです。

{} /* console.log(this.props.value)の結果 */

//親コンポーネント
export default class Parent extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      value: 'aaa'
    }
  }
  ...
  render() {
    return (
      <Child parentState={this.state.value} />
    )
  }
}

// 子コンポーネント
export default class Child extends React.Component {
  constructor(props) {
    super(props)
    ...
  }
  ...
  render() {
     console.log(this.props.value}
  }
}

Comments

[hoshi-takanori]

前回の質問もですが、いろいろ省略しすぎなのが気になります。少なくとも Child の render() は何か返すべきでは。

Answer 1

Child コンポーネントの props は、

<Child parentState={this.state.value} />

と書かれているので、

{
  parentState: (ParentコンポーネントのStateの value)
}

という形式になっていると思います。

なので、Child コンポーネントの props から value を読み出すことはできません。
this.props.value の 代わりに this.props.parentState と書けるでしょう。

Comments

[hoshi-takanori]

横から失礼します。this.state.parentState じゃなくて this.props.parentState ですよね。

[coolwind0202]

ありがとうございます。修正しました

[_dana]

以上の記述で試しましたがコンソールにはundefinedが出力されます。

[coolwind0202]

① Child コンポーネントの render() で任意の値を返すように変更してください (return null でも構いません)。
② Child コンポーネント と Parent コンポーネントはそれぞれ別の .js ファイルに記述していますか？

[_dana]

別のファイルに記述しています。

[coolwind0202]

こちらの環境では動作が確認できたので、質問文で省略されている部分などに原因があるかもしれません。

Childコンポーネントの render() の console.log() のカッコが閉じられていないのが気になるので、もう一度いまのコードを正しく質問文にコピーペーストしてください。