【React】親コンポーネントの状態を子コンポーネントから変更する

こんにちは、フロントエンドエンジニアの「てりー」です。
僕の詳しいプロフィールはこちら

また、未経験から独学でフロントエンドエンジニアになる勉強方法をまとめたので、興味があれば是非!

関連記事

プログラミング完全初心者何から勉強すれば良いか分からない。具体的にやることを教えて欲しい。 こういった疑問に答えて、フロントエンドエンジニアになる為の具体的な勉強プランについて解説しています[…]

はじめに

親から子にデータを渡す際は素直にpropsで渡せば良いですが、
子から親のデータを変更する際は関数を実行して変更するので、その方法をまとめました。

どうすれば子コンポーネントで親コンポーネントの状態を変えられるのか

結論から言うと、

・親コンポーネントでuseStateと関数を定義

・propsとしてその関数を子コンポーネントに渡す

・子コンポーネントでpropsで渡された関数を実行して更新

の手順で出来ます。

簡単な例で見ていきましょう。

親コンポーネント

 //useStateでデータを定義。初期値をfalseにconst [state,setState] = useState(false)//関数のchangeStateを定義。引数のisStateは子コンポーネントで実行した際に取ってくる。const changeState = (isState) => { setState(isState)}return ( <div>//propsとして子コンポーネントに関数を渡す<childComponent changeState={changeState} /> </div>  )}

子コンポーネントでは

//とりあえずisStateにはtrueを格納const isState = true//親から貰った関数を実行changeState(isState)

これで親コンポーネントのstateはtrueに更新できます。

Reactを使って仕事をしたい人へ

Reactを仕事で使いこなしたい人、Reactの知識に不安がある人に向けて、具体的な勉強方法のロードマップをまとめました。

関連記事

僕がフロントエンドエンジニアとして、React + TypeScriptで開発して、3年ぐらい経過しました。ノウハウがたまってきたので、React + TypeScriptの勉強方法をまとめようと思います。すでにReact+Ty[…]

興味があれば是非ご覧下さい。

 

てりーが書いたReactの記事まとめ

関連記事

こんにちは、フロントエンドエンジニアの「てりー」です。僕の詳しいプロフィールはこちらてりーが今までに「React」に関して書いた記事を目的や難易度別にまとめました!Reactの学習について完全未経験からフロントエンドエンジニ[…]