【React】孫要素のボタンを押して、親要素のstateを変更したい

前提

Reactでシステムを構築しています。

実現したいこと

孫要素のボタンを押して、親要素のstateを変更し三項演算子にて要素を出し分けたいです。

発生している問題・エラーメッセージ

孫へのハンドラー関数の渡し方がわかりません。そもそもこの方向性であっているのか自身がありません。

該当のソースコード

＝＝＝親要素＝＝＝

export const Header = () => {
	const [State, setState] = useState(true);

	const ChangeState = (isState) => {
		setState(isState);
	};

	return (
		<>
			{State ? (
				<ChildContentA setState={ChangeState} />
			) : (
				<ChildContentB setState={ChangeState} />
			)}
		</>
	);
};

＝＝＝子要素＝＝＝

export const ChildContentA = (props) => {
	return (
		<>
			<div>
				<GrandChildContent setState={props.ChangeState} />
			</div>
		</>
	);
};

＝＝＝孫要素＝＝＝

export const GrandChildContent = () => {
	const ChangeButton = (props) => {
		const isState = false;
		props.ChangeState(isState);
	};
	return (
		<button onClick={ChangeButton}>
			button
		</button>
	);
};

hoshi-takanori

2022/07/23 07:32

孫要素の ChangeButton の引数 props が不要です。 (props.ChangeState の props は GrandChildContent の引数の props です。)

teto_plw

2022/07/23 07:38

ありがとうございます。こちらは今回の内容に必要がない部分でしたため削除させていただきました。（孫要素のボタンに画像を渡すためのpropsでした）

行動規範の内容に同意します

回答1件

ベストアンサー

ボタンをクリックしたときは、それがChildContentAのものかChildContentBのものかに関わらず、単純に現在のstateのブール値を反転させればよい、ということであれば、たとえばこんな感じです。(※exportは省略しています。）

jsx
1const GrandChildContent = ({ onClick }) => {
2  const handleClick = () => {
3    onClick();
4  }
5  return (
6    <button onClick={handleClick}>
7      button
8    </button>
9  );
10};

jsx
1const ChildContentA = ({ onChangeState }) => {
2  const handleChangeState = () => {
3    onChangeState();
4  };
5  return (
6    <div className="A">
7      <GrandChildContent onClick={handleChangeState} />
8    </div>
9  );
10};

jsx
1const ChildContentB = ({ onChangeState }) => {
2  const handleChangeState = () => {
3    onChangeState();
4  };
5  return (
6    <div className="B">
7      <GrandChildContent onClick={handleChangeState} />
8    </div>
9  );
10};

jsx
1const Header = () => {
2  const [state, setState] = useState(true);
3
4  const handleChangeState = () => {
5    setState(!state);
6  };
7
8  return (
9    state ? (
10      <ChildContentA onChangeState={handleChangeState} />
11    ) : (
12      <ChildContentB onChangeState={handleChangeState} />
13    )
14  );
15};

動作確認用 👉 https://codepen.io/su507/pen/yLKXqMY?editors=1111

備考

コンポーネントのpropでイベントハンドラを渡すものは (onChangeState のように)onから始めるような名前にし、
あるコンポーネントの中で、子コンポーネントの onXxxx prop に渡す関数は、(handleChangeState のように)handle から始まる名前のものをいったん作っておいてそれを渡す

というのを（面倒でも）やっておくのを習慣づけるとよいかと思います。

投稿2022/07/23 12:26