Context bijwerken in React

In deze les bekijken we het bijwerken van componenten wanneer de contextwaarde verandert. Stel dat je wilt dat de context verandert.

In dat geval is het handig om context te gebruiken in combinatie met states. Laten we onze applicatie met doosjes, die we in de vorige les hebben gemaakt, een beetje aanpassen en ervoor zorgen dat bij het klikken op een knop de doorgegeven waarde verandert in 'metal box :)'.

Laten we dus ons bestand App nemen en na BigBox een knop tekenen:

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

Importeer vervolgens de hook useState en maak een state name aan, waarvan de waarde zal veranderen bij het klikken op de knop. Laten we de startwaarde instellen op wat we eerst direct als contextwaarde doorgeven, namelijk 'small box :)':

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

Deze keer geven we via de context niet een string door, maar de state name:

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

Als laatste stap roepen we een click handler voor de knop aan en gebruiken we de functie setName om een nieuwe waarde voor de state in te stellen op 'metal box :)'. Hierna kan er op de knop worden geklikt en het resultaat worden gecontroleerd:

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

Gebruik de applicatie die je hebt gemaakt bij het oplossen van de taken voor de vorige les. Maak een state age aan, die je in plaats van het getal via context zult doorgeven vanuit App, stel de startwaarde in op 50. Voeg onder de component Parent in App een knop toe, waarbij bij elke klik op de knop de waarde van de state age met 2 afneemt.