Dvig stanj v React

Pogosto mora več komponent odražati iste spreminjajoče se podatke. V React je priporočljivo, da skupno stanje dvignemo do najbližjega skupnega prednika. Poglejmo si primer.

Recimo, da želimo narediti kalkulator temperature vode. Predstavljal bo vnosno polje, v katerega bo uporabnik vnašal temperaturo, in odstavek, v katerega bo izpisana sodba: ali je voda tekoča, trdna ali plinasta.

Recimo, da naš kalkulator predstavlja komponento-vsebnik Calculator:

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

Izločimo vnosno polje za temperaturo v komponento TempInp, odstavek s sodbo pa v komponento Verdict:

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

Zlahka je razumeti, da morata tako TempInp kot Verdict imeti stanje s temperaturo. Ob tem je logično, da mora biti to ista temperatura: med vnašanjem podatkov v vnosno polje mora biti prikazana sodba.

V takem primeru je priporočljivo uporabiti tehniko, imenovano dvig stanja: stanje, ki je skupno dvema (ali več) komponentama, se dvigne navzgor do njihovega skupnega starša.

V našem primeru se bo izkazalo, da mora stanje s temperaturo pripadati komponenti Calculator, ki ga bo posredoval v TempInp in Verdict kot lastnosti (props):

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

V komponenti TempInp mora biti vnosno polje za spreminjanje temperature. Toda, ker je temperatura lastnost (prop) te komponente, je ne moremo neposredno spreminjati v TempInp. Pravilno je, da iz komponente Calculator posredujemo posebno funkcijo za spreminjanje temperature:

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

Lahko tudi, mimogrede, ne uvedemo nove funkcije, ampak podrejeni komponenti posredujemo funkcijo setTemp:

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

Napišite implementacijo komponent TempInp in Verdict.

Pomislite na 3 naloge, v katerih je potrebno uporabiti dvig stanja. Napišite rešitve teh nalog.