react stateの更新について

Question

reactを使って開発しているのですが、
詰まってしまったので知恵をお貸しください。

##やろうとしていること
component1(親)

this.state = (
  hoge: false
);

func() {
  this.setState({
    hoge: true
  });
}

render() {
  return (
    <div>
      <component2 testProps={this.state} />
      <component3 testFunc={this.func} />
    </div>
  );
}

component2(子)

static propTypes = {
  testProps: PropTypes.bool
}
this.state = (
  test: this.props.testProps.hoge,
);

render() {
  if(this.state.test) {
    return (
      <p>成功</p>
    );
  } else {
    return (
      <p>失敗</p>
    );
  }
}

component3(子)

const propTypes = {
  testFunc: PropTypes.func
}

render() {
  return (
    <button onClick={() => { this.props.testFunc(); }}>aaa</button>
  );
}

component2はstateの値がtrueだったら成功、falseだったら失敗を出すようにしています。
component3のボタンをクリックしたら親のcomponent1のstateを変更し、hogeをtrueにします。
そしたらcomponent2で出てくる値は成功になるはずなのですが
変わりません。

stateの値は変わっているのですがview上では変化はありません。

どうすれば変化するのでしょうか？

Comments

[HayatoKamono]

過去の質問が未解決のまま放置になっているようです。過去の質問で解決済みになったものがありましたら、ベストアンサーを選択し解決済みに変更頂けますでしょうか？

Answer 1

#1

      <component3 testFunc={this.Func} />

this.Funcではなく、this.funcですよね。

#2

this.state = (
  test: this.props.hoge,
);

component2のトップで上記記載がありますが、component1でcomponent2をrenderする時には、hogeというpropが確認出来ません。ここは大丈夫でしょうか？

      <component2 testProps={this.state} />

#3

this.state = (
  hoge: false
);

component1の上記部分ですが、これだと構文エラーが起きていませんか？

state = {
  hoge: false
}

or

constructor(props) {
  super(props);
  this.state = {
    hoge: false
  }
}

#4

<component3 testFunc={this.func} />

あと、これですと以下のようなエラーが出てしまうかと思います。

Cannot read property 'setState' of undefined

なので、thisを適切にbindしてあげる必要があります。
いろいろやり方はありますが、とりあえず以下で。　

<component3 testFunc={this.func.bind(this} />

Comments

[退会済みユーザー]

すみません。修正しました。

[退会済みユーザー]

すみません。
とりあえず、質問内容は
component1(親)からcomponent2(子)にpropsを渡して、そのpropsを元にif文を使って処理をしている。
また、component3(子)からcomponent1(親)のstateを更新させた時に
component2(子)のif文の部分は変化するのか？変化させるにはどうすればいいかって質問です。

[HayatoKamono]

まずは上記指摘したポイントをコードに取り入れてそちらを追加掲載して頂けますでしょうか？その際、import部分も含め、コードを一切省略しないかたちで掲載頂ければと思います。加えて、タイプミスなどないことを確認した上でコードを実行し、エラーが出ている場合はエラー文の掲載もお願いします。

基本的には上記の回答欄で掲載した内容を取り入れるだけで、質問文で書かれてるようなことはクリア出来ます。回答投稿時に動作確認済。