Pengangkatan State di React

Seringkali beberapa komponen harus merefleksikan data yang sama yang berubah. Di React disarankan untuk mengangkat state bersama ke leluhur bersama terdekat. Mari kita lihat contohnya.

Misalkan kita ingin membuat kalkulator suhu air. Ini akan berupa input, di mana pengguna akan memasukkan suhu, dan paragraf, di mana verdict akan ditampilkan: air cair, air padat, air gas.

Misalkan kalkulator kita mewakili komponen-container Calculator:

function Calculator() {
	return <div>
		
	</div>;
}

Mari kita pindahkan input untuk memasukkan suhu ke dalam komponen TempInp, dan paragraf dengan verdict - ke dalam komponen Verdict:

function Calculator() {
	return <div>
		<Verdict />
		<TempInp />
	</div>;
}

Mudah dipahami bahwa baik TempInp maupun Verdict harus memiliki state dengan suhu. Pada saat yang sama, logis bahwa ini harusnya suhu yang sama: saat data dimasukkan ke dalam input, verdict harus ditampilkan.

Dalam hal ini disarankan untuk menggunakan teknik, yang disebut pengangkatan state: state, yang umum untuk dua (atau lebih) komponen diangkat ke atas hingga ke induk bersama mereka.

Dalam kasus kita, akan berakibat bahwa state dengan suhu harus dimiliki oleh komponen Calculator, yang akan meneruskannya ke TempInp dan Verdict sebagai props:

function Calculator() {
	const [temp, setTemp] = useState(0);
	
	return <div>
		<Verdict temp={temp} />
		<TempInp temp={temp} />
	</div>;
}

Dalam komponen TempInp harus ada input untuk mengubah suhu. Tapi, karena suhu ini adalah props dari komponen ini, maka secara langsung di TempInp tidak boleh mengubahnya. Yang benar adalah meneruskan dari komponen Calculator fungsi khusus untuk mengubah suhu:

function Calculator() {
	const [temp, setTemp] = useState(0);
	
	function changeTemp(event) {
		setTemp(event.target.value);
	}
	
	return <div>
		<Verdict temp={temp} />
		<TempInp temp={temp} changeTemp={changeTemp} />
	</div>;
}

Bisa, omong-omong, tidak memperkenalkan fungsi baru, tapi meneruskan fungsi setTemp ke komponen anak:

function Calculator() {
	const [temp, setTemp] = useState(0);
	
	return <div>
		<Verdict temp={temp} />
		<TempInp temp={temp} setTemp={setTemp} />
	</div>;
}

Tuliskan implementasi komponen TempInp dan Verdict.

Cari tahu 3 tugas, di mana perlu menggunakan pengangkatan state. Tuliskan solusi tugas-tugas ini.