Lyfta state i React

Ofta behöver flera komponenter reflektera samma föränderliga data. I React rekommenderas att man lyfter delat state till närmaste gemensamma förfader. Låt oss titta på ett exempel.

Låt oss säga att vi vill göra en kalkylator för vattentemperatur. Den kommer att bestå av en input, där användaren matar in temperaturen, och ett stycke, där bedömningen kommer att skrivas ut: vatten är flytande, vatten är fast, vatten är gasformigt.

Låt oss säga att vår kalkylator representerar en behållarkomponent Calculator:

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

Låt oss bryta ut input för temperaturinmatning till en komponent TempInp, och stycket med bedömningen - till en komponent Verdict:

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

Det är lätt att förstå att både TempInp och Verdict borde ha state för temperaturen. Samtidigt är det logiskt att detta borde vara samma temperatur: allt eftersom data matas in i input ska bedömningen visas.

I sådana fall rekommenderas man att använda en teknik, som kallas att lyfta state: state, gemensamt för två (eller fler) komponenter lyfts uppåt till deras närmaste gemensamma förälder.

I vårt fall kommer det att innebära att state med temperaturen bör tillhöra komponenten Calculator, som kommer att skicka det till TempInp och Verdict som props:

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

I komponenten TempInp bör det finnas en input för att ändra temperaturen. Men eftersom denna temperatur är en prop i denna komponent, så kan den inte ändras direkt i TempInp. Rätt sätt vore att skicka från komponenten Calculator en speciell funktion för att ändra 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 förresten undvika att introducera en ny funktion, utan skicka funktionen setTemp till barnkomponenten:

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

Skriv implementationen av komponenterna TempInp och Verdict.

Kom på 3 uppgifter där man behöver använda att lyfta state. Skriv lösningar till dessa uppgifter.