Heving av tilstand i React

Ofte må flere komponenter reflektere de samme foranderlige dataene. I React anbefales det å heve den delte tilstanden opp til nærmeste felles forfedre. La oss se på et eksempel.

La oss si at vi ønsker å lage en kalkulator for vanntemperatur. Den vil representere et input-felt, der brukeren skal skrive inn temperaturen, og et avsnitt, der det vil bli vist en vurdering: vannet er flytende, vannet er fast, vannet er gassformet.

La oss si at kalkulatoren vår representerer en container-komponent Calculator:

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

La oss skille ut input-feltet for temperaturinntasting i en komponent TempInp, og avsnittet med vurderingen - i en komponent Verdict:

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

Det er lett å forstå at både TempInp og Verdict må ha en tilstand med temperaturen. Samtidig er det logisk at dette må være den samme temperaturen: etter hvert som data skrives inn i input-feltet, må vurderingen vises.

I så fall anbefales det å bruke en teknikk, kalt tilstandsheving: tilstanden, som er felles for to (eller flere) komponenter, heves opp til deres felles forelder.

I vårt tilfelle vil det resultere i at tilstanden med temperaturen må tilhøre komponenten Calculator, som vil sende den til TempInp og Verdict som props:

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

I komponenten TempInp må det være et input-felt for å endre temperaturen. Men, siden denne temperaturen er en prop for denne komponenten, kan den ikke endres direkte i TempInp. Riktig måte vil være å sende fra komponenten Calculator en spesiell funksjon for å endre temperaturen:

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>;
}

Man kan, forresten, ikke introdusere en ny funksjon, men sende funksjonen setTemp til barnekomponenten:

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

Skriv implementasjonen av komponentene TempInp og Verdict.

Kom på 3 oppgaver der det er nødvendig å bruke tilstandsheving. Skriv løsninger på disse oppgavene.