Lifting State Up i React

Ofte skal flere komponenter reflektere de samme ændrende data. I React anbefales det at løfte den delte state op til den nærmeste fælles forfader. Lad os se på et eksempel.

Lad os sige, at vi vil lave en lommeregner for vandtemperatur. Den vil repræsentere et inputfelt, hvor brugeren indtaster temperaturen, og et afsnit, hvor der udskrives en vurdering: vandet er flydende, vandet er fast, vandet er gasformigt.

Lad os sige, at vores lommeregner repræsenterer en container-komponent Calculator:

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

Lad os flytte inputfeltet for temperaturning ind i komponenten TempInp, og afsnittet med vurderingen - ind i komponenten Verdict:

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

Det er let at forstå, at både TempInp og Verdict skal have en state med temperaturen. Samtidig er det logisk, at dette skal være den samme temperatur: Efterhånden som data indtastes i inputfeltet, skal vurderingen vises.

I sådanne tilfælde anbefales det at bruge en teknik, som kaldes lifting af state: staten, som er fælles for to (eller flere) komponenter, løftes op til deres fælles forælder.

I vores tilfælde vil det betyde, at staten med temperaturen skal tilhøre komponenten Calculator, som vil videregive 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 skal der være et inputfelt for at ændre temperaturen. Men da denne temperatur er et prop for denne komponent, kan den ikke ændres direkte i TempInp. Det rigtige vil være at videregive fra komponenten Calculator en speciel funktion til at ændre 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 undlade at introducere en ny funktion, og videregive den underordnede komponent funktionen setTemp:

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

Skriv implementationen af komponenterne TempInp og Verdict.

Find på 3 opgaver, hvor det er nødvendigt at bruge lifting af state. Skriv løsninger på disse opgaver.