Zvedání stavů v Reactu

Často několik komponent musí reflektovat stejná měnící se data. V Reactu je doporučeno zvednout společný stav k nejbližšímu společnému předkovi. Podívejme se na příkladu.

Řekněme, že chceme vytvořit kalkulačku teploty vody. Bude představovat input, do kterého uživatel bude zadávat teplotu, a odstavec, do kterého se bude vypisovat verdikt: voda je kapalná, voda je pevná, voda je plynná.

Řekněme, že naše kalkulačka představuje kontejnerovou komponentu Calculator:

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

Vynesme input pro zadání teploty do komponenty TempInp, a odstavec s verdiktem - do komponenty Verdict:

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

Je snadné pochopit, že jak TempInp, tak Verdict musí mít stav s teplotou. Přitom je logické, že by to měla být jedna a ta samá teplota: jak se zadávají data do inputu, musí se zobrazovat verdikt.

V takovém případě je doporučeno použít postup, nazývaný zvedání stavu: stav, společný pro dvě (a více) komponent, je zvednut nahoru k jejich společnému rodiči.

V našem případě vyjde, že stav s teplotou by měl patřit komponentě Calculator, který jej bude předávat do TempInp a Verdict jako props:

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

V komponentě TempInp by měl být input pro změnu teploty. Ale, protože tato teplota je props této komponenty, tak přímo v TempInp ji nelze měnit. Správně bude předat z komponenty Calculator speciální funkci pro změnu 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>;
}

Lze, mimochodem, nezavádět novou funkci, ale předat do dceřiné komponenty funkci setTemp:

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

Napište implementaci komponent TempInp a Verdict.

Vymyslete 3 úlohy, ve kterých je třeba použít zvedání stavu. Napište řešení těchto úloh.