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 маселе ойлонуп чыгарыңыз. Бул маселелердин чечимдерин жазыңыз.