React'te Bağlam Güncelleme

Bu derste, bağlam değeri değiştiğinde bileşenlerin güncellenmesini inceleyeceğiz. Diyelim ki bağlamın değişmesini istiyorsunuz.

Bu durumda, bağlamı durum yönetimiyle birlikte kullanmak faydalıdır. Bir önceki derste yaptığımız kutular uygulamamızı biraz değiştirelim ve bir butona tıklandığında iletilen değerin 'metal box :)' olmasını sağlayalım.

Şimdi, App dosyamızı alalım ve BigBox'tan sonra bir buton çizelim:

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

Daha sonra, useState kancasını içe aktaralım ve değeri butona tıklandığında değişen bir name durumu oluşturalım. Başlangıç değeri olarak, bağlam değeri olarak hemen ilettiğimiz, yani 'small box :)' değerini verelim:

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

Bu sefer, bağlam olarak bir string değil, name durumunu ileteceğiz:

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

Son adım olarak, butona tıklandığında setName fonksiyonunu kullanarak durumun yeni değerini 'metal box :)' olarak ayarlayacağız. Bundan sonra butona tıklayıp sonucu kontrol edebilirsiniz:

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

Önceki dersin problemlerini çözerken oluşturduğunuz uygulamayı kullanın. Bağlam aracılığıyla App'ten bir sayı yerine ileteceğiniz bir age durumu oluşturun, başlangıç değerini 50 olarak ayarlayın. App içindeki Parent bileşeninin altına, her tıklandığında age durumunun değerini 2 azaltacak bir buton ekleyin.