ReactにてContextのデータが上手く子コンポーネントに渡らない。

Question

概要

親コンポーネントから子コンポーネントへ、useContextを使いデータを渡したいと考えております。
子コンポーネントは、親と子のコンポーネントは別々のファイルになります。

コード

親コンポーネント

import Child from './ Child'


const test = {
	value:{
		message:'Hello2'
	}
}
const TestContext = React.createContext(test.value)

export default function Applicationform(){
	return (
		<TestContext.Provider value={test.value}>
			<Child />
		</TestContext.Provider>
	)
}

子コンポーネント

export default function Child(){
	const theme = React.useContext(TestContext);
	return (
			<button>
					I am styled by theme context:{ theme.message }
			</button>
	);
}

質問

ReactにてContext.Providerで囲む事で、子コンポーネントへコンテキストデータを渡せると読みましたが、子コンポーネントでコンテキストの内容を参照する事出来ません。

// この部分で「TestContextが見つからない」とエラーになります。
const theme = React.useContext(TestContext);

どこに誤りがあるかご指摘頂けないでしょうか？

Answer 1

この部分で「TestContextが見つからない」とエラーになります。

エラーメッセージのとおりです。この場所でTestContextを参照できる必要があります。

Comments

[maisumakun]

多くの場合、TestContextだけ独立なファイルで作成してexportを行い、Provider側、useする側それぞれでimportして参照します。

[yuki_90453]

これすごく参照になりました！ありがとうございます。