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 есеп ойлап табыңыз. Осы есептердің шешімдерін жазыңыз.