Kontekstin päivittäminen Reactissa

Tässä oppitunnissa tarkastelemme komponenttien päivittämistä kontekstin arvon muuttuessa. Oletetaan, että haluat kontekstin muuttuvan.

Tässä tapauksessa on hyödyllistä käyttää kontekstia yhdessä tilojen kanssa. Muutetaan hieman laatikko-sovellustamme, jota teimme edellisellä oppitunnilla, ja tehdään niin, että painiketta napsauttamalla välitetty arvo muuttuu arvoksi 'metal box :)'.

Joten, otetaan tiedostomme App ja BigBox-komponentin jälkeen piirretään painike:

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

Seuraavaksi tuodaan useState-hookki ja luodaan tila name, jonka arvo muuttuu painiketta napsautettaessa. Asetetaan sille alkuarvoksi sama arvo, jonka välitimme kontekstin arvona, eli 'small box :)':

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

Tällä kertaa kontekstilla emme välitä merkkijonoa, vaan tilan name:

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

Viimeisenä vaiheena käsittelemme painikkeen napsautuksen ja asetamme setName-funktion avulla uuden tilan arvoksi 'metal box :)'. Tämän jälkeen voit painaa painiketta ja tarkastaa tuloksen:

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

Käytä edellisen oppitunnin tehtäviä ratkoessasi luomaasi sovellusta. Luo tila age, jonka välität kontekstin avulla App-komponentista luvun sijaan, aseta sille alkuarvo 50. Lisää Parent-komponentin alle App-komponenttiin painike, jota napsautettaessa tilan age arvo pienenee 2:lla.