Állapot felemelés a Reactban

Gyakran előfordul, hogy több komponensnek ugyanazt a változó adatot kell tükröznie. A Reactban ajánlott az közös állapotot a legközelebbi közös ősbe felemelni. Nézzük ezt egy példán keresztül.

Tegyük fel, hogy egy víz hőmérséklet kalkulátort szeretnénk készíteni. Ez egy input mezőből fog állni, ahol a felhasználó megadhatja a hőmérsékletet, és egy bekezdésből, amelyik kiírja a véleményt: a víz folyékony, szilárd vagy gáz halmazállapotú.

Tegyük fel, hogy a kalkulátorunk egy Calculator nevű konténer komponens:

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

Vegyük ki a hőmérséklet megadására szolgáló input mezőt a TempInp komponensbe, a véleménnyel rendelkező bekezdést pedig a Verdict komponensbe:

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

Könnyen megérthető, hogy mind a TempInp, mind a Verdict komponensnek állapotban kell tartania a hőmérsékletet. Ugyanakkor logikus, hogy ennek ugyanannak a hőmérsékletnek kell lennie: ahogy az input mezőbe írt adatok változnak, a véleménynek is frissülnie kell.

Ilyen esetben ajánlott egy állapot felemelés nevű technikát alkalmazni: a két (vagy több) komponens számára közös állapotot feljebb emeljük a legközelebbi közös szülőjükbe.

Esetünkben ez azt eredményezi, hogy a hőmérsékletet tároló állapot a Calculator komponensé lesz, ami továbbadja azt a TempInp és a Verdict komponenseknek prop-ként:

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

A TempInp komponensben kell lennie egy input mezőnek a hőmérséklet megváltoztatásához. De mivel ez a hőmérséklet a komponens prop-ja, közvetlenül a TempInp komponensben nem módosítható. helyes megoldás, ha a Calculator komponensből egy speciális függvényt adunk át a hőmérséklet módosításához:

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

Egyébként nem kell új függvényt bevezetni, hanem átadhatjuk a gyermek komponensnek a setTemp függvényt:

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

Írja meg a TempInp és a Verdict komponensek implementációját.

Találjon ki 3 olyan feladatot, ahol állapot felemelést kell használni. Írja meg ezeknek a feladatoknak a megoldását.