Ažuriranje konteksta u Reactu

U ovoj lekciji ćemo razmotriti ažuriranje komponenti pri promeni vrednosti konteksta. Pretpostavimo da želite da se kontekst menja.

U ovom slučaju je korisno primeniti kontekst u vezi sa stanjima. Hajde da malo izmenimo našu aplikaciju sa kutijama koju smo pravili u prethodnoj lekciji i učinimo da po kliku na dugme prosledjena vrednost postane 'metal box :)'.

Dakle, uzećemo naš fajl App i posle BigBox nacrtaćemo dugme:

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

Zatim ćemo importovati kuk useState i napraviti stanje name, čija će se vrednost menjati po kliku na dugme. Dodelićemo mu početnu vrednost onu koju smo odmah prosledili kao vrednost konteksta, odnosno 'small box :)':

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

Ovog puta ćemo putem konteksta proslediti ne string, već stanje name:

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

Kao poslednji korak, pozvaćemo rukovaoca klika na dugme i pomoću funkcije setName postaviti novu vrednost stanja u 'metal box :)'. Posle toga možete da kliknete na dugme i proverite rezultat:

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

Koristite aplikaciju koju ste napravili pri rešavanju zadataka za prethodnu lekciju. Napravite stanje age, koje ćete umesto broja proslediti putem konteksta iz App, postavite mu početnu vrednost 50. Dodajte ispod komponente Parent u App dugme, pri svakom kliku na koju će se vrednost stanja age smanjivati za 2.