Падзей станняў у 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 задачы, у якіх трэба выкарыстоўваць падзей стання. Напішыце рашэнні гэтых задач.