Reactで子コンポーネント同士で値（State）を渡したい

Question

前提・実現したいこと

現在React,Typscriptで開発しています。開発方針としてご相談です。

結論から言うと、
Reactで子コンポーネント同士で値（State）を渡す方法を知りたいです

背景として、
親コンポーネント（A.tsx）に子コンポーネントが２つ（B.tsx,C.tsx）が読み込まれています。

B.tsxには useStateによってhoge変数が宣言されています。
このhogeの値をC.tsxでも使いたいのですが、どのようにすればいいでしょうか？

試したこと・気にしていること

• reduxによってコンポーネント間での値の受け渡しがもっと柔軟になりそう。と調べた。
• C.tsxでuseStateによって画面リロードせずに動的に画面の値が変化しますが、仮に値を引き渡したB.tsxでも同様な動きが可能なのか。

お手数ですがもしわかる方がいればアドバイス頂けますと幸いです。

Answer 1

B.tsxには useStateによってhoge変数が宣言されています。

このhogeの値をC.tsxでも使いたいのですが、どのようにすればいいでしょうか？

このような構造にするのではなく、useStateを両者の親コンポーネントであるAの側に移すべき、と考えます。

Comments

[k499778]

ご返信頂きありがとうございます。しっくりきました。
それを子にpropsとして渡して使うイメージですかね！
やってみます