React'ta State'in Yukarı Taşınması

Genellikle birkaç bileşen aynı değişen verileri yansıtmalıdır. React'ta, paylaşılan state'i en yakın ortak üste taşımanız önerilir. Bir örnekle bakalım.

Bir su sıcaklığı hesaplayıcısı yapmak istediğimizi varsayalım. Bu, kullanıcının sıcaklığı gireceği bir input ve sonucun yazdırılacağı bir paragraftan oluşacak: su sıvı, su katı, su gaz.

Hesaplayıcımızın Calculator adında bir konteyner bileşeni olduğunu varsayalım:

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

Sıcaklık girişi için input'u TempInp bileşenine, sonuç paragrafını ise Verdict bileşenine çıkaralım:

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

Hem TempInp hem de Verdict bileşenlerinin sıcaklık için bir state'e sahip olması gerektiğini anlamak kolaydır. Aynı zamanda, bunun aynı sıcaklık olması mantıklıdır: input'a veri girildikçe sonuç görüntülenmelidir.

Bu gibi durumlarda, state'in yukarı taşınması adı verilen tekniği kullanmanız önerilir: iki (veya daha fazla) bileşen için ortak olan state, en yakın ortak üst bileşene taşınır.

Bizim durumumuzda, sıcaklık state'i Calculator bileşenine ait olmalıdır, bu bileşen de onu TempInp ve Verdict bileşenlerine prop'lar olarak iletecektir:

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

TempInp bileşeninde sıcaklığı değiştirmek için bir input olmalıdır. Ancak, bu sıcaklık bu bileşenin bir prop'u olduğundan, doğrudan TempInp içinde değiştirilemez. Doğrusu, Calculator bileşeninden sıcaklığı değiştirmek için özel bir fonksiyon iletmektir:

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>;
}

Bu arada, yeni bir fonksiyon tanımlamak yerine, alt bileşene setTemp fonksiyonunu iletmek de mümkündür:

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

TempInp ve Verdict bileşenlerinin gerçekleştirimini yazın.

State'in yukarı taşınmasını kullanmanız gereken 3 problem bulun. Bu problemlerin çözümlerini yazın.