Memperbarui Konteks di React

Dalam pelajaran ini, kita akan membahas pembaruan komponen ketika nilai konteks berubah. Misalkan Anda ingin konteksnya berubah.

Dalam hal ini, berguna untuk menerapkan konteks berpasangan dengan state. Mari sedikit ubah aplikasi kotak kita, yang kita buat di pelajaran sebelumnya dan buat agar saat tombol ditekan nilai yang diteruskan menjadi 'metal box :)'.

Jadi, ambil file App kita dan setelah BigBox gambarlah sebuah tombol:

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

Selanjutnya, impor hook useState dan buat state name, yang nilainya akan berubah saat tombol ditekan. Mari beri nilai awal yang sama dengan yang kita langsung berikan sebagai nilai konteks, yaitu 'small box :)':

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

Kali ini, konteks yang akan kita teruskan bukan string, melainkan state name:

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

Sebagai langkah terakhir, kita akan memanggil penangan klik tombol dan dengan menggunakan fungsi setName atur nilai baru state menjadi 'metal box :)'. Setelah itu, Anda dapat menekan tombol dan memeriksa hasilnya:

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

Gunakan aplikasi yang Anda buat saat menyelesaikan tugas untuk pelajaran sebelumnya. Buat state age, yang akan Anda teruskan menggunakan konteks alih-alih angka dari App, atur nilai awalnya menjadi 50. Tambahkan tombol di bawah komponen Parent di dalam App, di mana setiap kali diklik, nilai state age akan berkurang sebesar 2.