Подигање на state во React

Често неколку компоненти треба да ги reflektiraat истите променливи податоци. Во React се препорачува заедничкиот state да се подигне до најблискиот заеднички предок. Ајде да погледнеме на пример.

Нека сакаме да направиме калкулатор за температура на водата. Тој ќе претставува input, во кој корисникот ќе ја внесува температурата, и параграф, во кој ќе се испише вердикт: водата е течна, водата е цврста, водата е гасовита.

Нека нашиот калкулатор претставува container-компонента Calculator:

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

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

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

Лесно е да се сфати дека и TempInp, и Verdict треба да имаат state со температура. При тоа, логично е дека ова треба да биде истата температура: како што се внесуваат податоци во input-от, треба да се прикажува вердиктот.

Во таков случај се препорачува да се користи техника, наречена подигање на state: state-от, заеднички за две (или повеќе) компоненти се подига нагоре до нивниот заеднички родител.

Во нашиот случај ќе испадне дека state-от со температурата треба да му припаѓа на компонентата Calculator, која ќе го пренесува во TempInp и Verdict како props:

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

Во компонентата TempInp треба да има input за промена на температурата. Но, бидејќи оваа температура е prop на оваа компонента, директно во 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 задачи, во кои треба да се користи подигање на state. Напишете решенија за овие задачи.