Reactで親子関係にある２つのコンポーネントでstateを使いまわしたい

Question

実現したいこと

Reactで親子関係にある２つのコンポーネントでstateを使いまわしたいと思っています。

親コンポーネントAAA
子コンポーネントBBB

今は下記のようなコードを記述していますが、両方のコンポーネントで、初期stateの設定、及びsetStateの設定のために、同じことを二度も記述しています。

（なお、setStateの値は最終的にjsonファイルからfetchさせて取得する予定ですが、今は省略して、直書きでsetStateしています。）

おそらく、もっとスマートに書くことができる気がするのですが、自分では解決できませんでした。

もっとスマートに書く方法をご教示いただけますと幸いです。

ソースコード

import React from 'react'
import PropTypes from 'prop-types'

//親コンポーネント
class AAA extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      hoge: 0,
      fuga: 0
    }
  }

  componentWillMount() {
    this.setState({
      hoge: 100,
      fuga: 200
    })
  }

  render() {
    const { hoge, fuga } = this.state
    return (
      <div>
        <p>{hoge}</p>
        <p>{fuga}</p>
        <BBB piyo="foo">項目１</BBB>
        <BBB piyo="bar">項目２</BBB>
      </div>
    )
  }
}
AAA.propTypes = {
  AAA: PropTypes.node
}


//子コンポーネント
class BBB extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      hoge: 0,
      fuga: 0
    }
  }

  componentWillMount() {
    this.setState({
      hoge: 100,
      fuga: 200
    })
  }

  render() {
    const { hoge, fuga } = this.state
    const { piyo } = this.props
    return (
      <div className={`${piyo}`}>
      <p>{ hoge }</p>
      <p>{ fuga }</p>
      <p>{this.props.children}</p></div>
    )
  }
}
BBB.propTypes = {
  BBB: PropTypes.node
}

export default AAA

初歩的な質問ですが、
何卒よろしくお願いいたします。

Answer 1

親コンポーネント AAA の hoge と fuga を、子コンポーネント BBB に props として渡せば良いのではないかなーと思っていました。
<BBB piyo="foo" hoge={hoge} fuga={fuga}>項目１</BBB>みたいなイメージです。
こうすると何かダメなんでしょうか？

Comments

[gksh7]

ありがとうございます。

同じようにpropsで持たせるだけでいいのですね。
単純に行けるんですね。
教えていただいた通りで全く問題なく、実装しまして期待通りに動きました。

今回もありがとうございます。
とても助かりました。

[set0gut1]

おめでとうございます！