Подизање стања у React-у

Често неколико компоненти мора да приказује исте податке који се мењају. У React-у је препоручено да се заједничко стање подигне до најближег заједничког претка. Хајде да погледамо на примеру.

Рецимо да желимо да направимо калкулатор температуре воде. Он ће бити представљен пољем за унос, у које ће корисник уносити температуру, и параграфом, у који ће бити исписан пресуда: вода је течна, вода је чврста, вода је гасовита.

Рецимо да наш калкулатор представља компоненту-контејнер Calculator:

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

Издвојимо поље за унос температуре у компоненту TempInp, а параграф са пресудом - у компоненту Verdict:

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

Лако је разумети да и TempInp, и Verdict треба да имају стање са температуром. При томе је логично да то треба да буде иста температура: док се подаци уносе у поље, треба да се приказује пресуда.

У таквом случају је препоручено да се користи техника, која се зове подизање стања: стање, заједничко за две (или више) компоненте, се подиже навише до њиховог заједничког родитеља.

У нашем случају ће се испоставити да стање са температуром треба да припада компоненти Calculator, која ће га прослеђивати у TempInp и Verdict као пропсе:

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

У компоненти TempInp треба да буде поље за унос за промену температуре. Али, пошто је та температура пропс ове компоненте, онда се директно у TempInp не може мењати. Исправно би било проследити из компоненте Calculator специјалну функцију за промену температуре:

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

Може се, уосталом, не уводити нова функција, већ проследити у детећу компоненту функцију setTemp:

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

Напишите имплементацију компоненти TempInp и Verdict.

Смислите 3 задатка, у којима је потребно користити подизање стања. Напишите решења тих задатака.