Reactにおけるコンテキストの更新

このレッスンでは、コンテキストの値が変更された際のコンポーネントの更新について検討します。コンテキストを変更したい状況を想定してみましょう。

このような場合、コンテキストをステートと組み合わせて使用すると便利です。前回のレッスンで作成した箱のアプリケーションを少し変更し、ボタンをクリックすると渡される値が'metal box :)'になるようにしてみましょう。

それでは、Appファイルを取り出し、BigBoxの後にボタンを描画します：

function App() {
	return (
		<MyContext.Provider value="small box :)">
			<BigBox />
			<button>click</button>
		</MyContext.Provider>
	);
}

次に、useStateフックをインポートし、ボタンクリックで変更されるnameステートを作成します。その初期値は、コンテキストの値として直前に渡していた値、つまり'small box :)'とします：

function App() {
	const [name, setName] = useState('small box :)');
}

今回は、コンテキストとして文字列ではなく、nameステートを渡します：

<MyContext.Provider value={name}>
	<BigBox />
	<button>click</button>
</MyContext.Provider>

最後のステップとして、ボタンクリックのハンドラーを呼び出し、setName関数を使用してステートの新しい値を'metal box :)'に設定します。その後、ボタンをクリックして結果を確認できます：

<button onClick={() => {
	setName('metal box :)');
}}>click</button>

前回のレッスンの課題で作成したアプリケーションを使用してください。ageステートを作成し、数値の代わりにこのステートをAppからコンテキストを介して渡します。初期値を50に設定します。App内のParentコンポーネントの下にボタンを追加し、そのボタンがクリックされるたびにageステートの値が2減少するようにしてください。