Pozdvihovanie stavu v React

Niekoľko komponentov často musí zobrazovať rovnaké meniace sa dáta. V Reacte sa odporúča pozdvihnúť spoločný stav k najbližšiemu spoločnému predkovi. Pozrime sa na príklad.

Povedzme, že chceme vytvoriť kalkulačku teploty vody. Bude pozostávať zo vstupného poľa, do ktorého používateľ zadá teplotu, a odseku, do ktorého sa bude vypisovať verdikt: voda je kvapalná, voda je tuhá, voda je plynná.

Povedzme, že naša kalkulačka je kontajnerový komponent Calculator:

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

Vynesme vstupné pole pre zadanie teploty do komponentu TempInp a odsek s verdiktom - do komponentu Verdict:

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

Je ľahké pochopiť, že ako TempInp, tak Verdict musia mať stav s teplotou. Zároveň je logické, že by to mala byť tá istá teplota: po zadaní údajov do vstupného poľa sa musí zobraziť verdikt.

V takom prípade sa odporúča použiť techniku nazývanú pozdvihovanie stavu: stav, ktorý je spoločný pre dva (alebo viac) komponentov, sa pozdvihne hore k ich spoločnému rodičovi.

V našom prípade to znamená, že stav s teplotou by mal patriť komponentu Calculator, ktorý ho bude odovzdávať do TempInp a Verdict ako props:

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

V komponente TempInp by malo byť vstupné pole pre zmenu teploty. Ale keďže táto teplota je props tohto komponentu, nie je možné ju priamo v TempInp meniť. Správne bude odovzdať z komponentu Calculator špeciálnu funkciu pre zmenu teploty:

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

Mimochodom, nie je potrebné zavádzať novú funkciu, stačí odovzdať do dcérskeho komponentu funkciu setTemp:

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

Napíšte implementáciu komponentov TempInp a Verdict.

vymyslite 3 úlohy, v ktorých je potrebné použiť pozdvihovanie stavu. Napíšte riešenia týchto úloh.