Podizanje stanja u React-u

Nekoliko komponenti često treba da prikazuje iste promenljive podatke. U React-u je preporučeno da se deljeno stanje podigne do najbližeg zajedničkog pretka. Pogledajmo na primeru.

Pretpostavimo da želimo da napravimo kalkulator temperature vode. Predstavljaće ga input polje, u koje korisnik unosi temperaturu, i pasus u koji će biti ispisan rezultat: tečnost, led ili para.

Neka naš kalkulator predstavlja kontejnersku komponentu Calculator:

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

Izdvojimo input za unos temperature u komponentu TempInp, a pasus sa rezultatom - u komponentu Verdict:

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

Lako je shvatiti da i TempInp i Verdict treba da imaju stanje sa temperaturom. Pri tome je logično, da to treba da bude ista temperatura: kako se podaci unose u input polje, rezultat treba da se prikazuje.

U ovom slučaju je preporučeno koristiti tehniku, koja se naziva podizanje stanja: stanje, zajedničko za dve (ili više) komponente podiže se naviše do njihovog zajedničkog roditelja.

U našem slučaju će ispasti da stanje sa temperaturom treba da pripada komponenti Calculator, koji će ga prosleđivati u TempInp i Verdict kao props:

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

U komponenti TempInp treba da bude input polje za promenu temperature. Međutim, pošto je ova temperatura props ove komponente, nije moguće direktno u TempInp menjati nju. Ispravno je proslediti iz komponente Calculator specijalnu funkciju za promenu 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>;
}

Može se, inače, ne uvoditi nova funkcija, već proslediti u child komponentu funkciju setTemp:

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

Napišite implementaciju komponenti TempInp i Verdict.

Smišljite 3 zadatka, u kojima je potrebno koristiti podizanje stanja. Napišite rešenja tih zadataka.