Издигане на състояния в 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 задачи, в които трябва да се използва издигане на състоянието. Напишете решения на тези задачи.