Mise à jour du contexte dans React

Dans cette leçon, nous examinerons la mise à jour des composants lors du changement de valeur du contexte. Supposons que vous souhaitiez que le contexte change.

Dans ce cas, il est utile d'appliquer le contexte en combinaison avec les états (states). Modifions un peu notre application avec les boîtes, que nous avons créée dans la leçon précédente et faisons en sorte qu'en cliquant sur un bouton la valeur transmise devienne 'metal box :)'.

Alors, prenons notre fichier App et après BigBox dessinons un bouton :

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

Ensuite, importons le hook useState et créons un état (state) name, dont la valeur sera modifiée par un clic sur le bouton. Donnons-lui comme valeur initiale celle que nous transmettions immédiatement comme valeur du contexte, c'est-à-dire 'small box :)' :

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

Cette fois, nous transmettrons via le contexte non pas une chaîne, mais l'état (state) name :

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

Comme dernière étape, nous appellerons le gestionnaire de clic sur le bouton et à l'aide de la fonction setName, nous définirons la nouvelle valeur de l'état sur 'metal box :)'. Après cela, vous pourrez cliquer sur le bouton et vérifier le résultat :

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

Utilisez l'application que vous avez créée lors de la résolution des tâches de la leçon précédente. Créez un état (state) age, que vous transmettrez via le contexte à la place du nombre depuis App, définissez sa valeur initiale sur 50. Ajoutez sous le composant Parent dans App un bouton, pour lequel à chaque clic la valeur de l'état age diminuera de 2.