React: コンポーネント間(親->子)のデータの受け渡しができない

Question

Reactで親コンポーネントのstateのデータを子コンポーネントに渡したいのですが、propsを使用してもうまくいきません。

調べたところ、propsがundefinedとなるエラーはよくあるようなのですが、props自体はundefinedではなく、指定したプロパティがundefinedになっています。

下記のコードではprops.valueがundefinedになっている状況です。

両コンポーネントともReact.Componentをextendsしたclassとして定義しています。
子コンポーネントをclassとして定義するべきでないという意見もありましたが、他の要素を考慮するとclassとして定義した方が都合がいいので他の方法を探しています。

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

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

Comments

[nekoniki]

省略されていてわからないのですが、子のコンポーネントのコンストラクタでsuper(props)を実行してますか？

[_dana]

ご指摘ありがとうございます。
質問内容を修正させていただきます。
super(props)は実行しております。

[nekoniki]

提示いただいたコードで確認したところコンソールに"props"と表示されたので再現しませんでした。
省略している箇所に原因があるかと思います。

Answer 1

定義は親コンポーネントに置きましょう。子から親に伝播できるのはイベントトリガーだけです。

export default class Parent extends React.Component {
 constructor(props) {
    super(props)
    ...
  }

Comments

[_dana]

親コンポーネントのpropsを子コンポーネントで使用できるということですか？

[FKM]

親コンポーネントにおいて、その引数propsを用いて、子に要素を引き渡すことができる仕組みです。

React/React Nativeにおけるコンポーネント間での値・関数・中身の受け渡し)
https://qiita.com/wktq/items/c079db14e6246e49fa48