State omhoog brengen in React

Vaak moeten meerdere componenten dezelfde veranderende gegevens weerspiegelen. In React wordt aanbevolen om de gedeelde state omhoog te brengen naar de dichtstbijzijnde gemeenschappelijke voorouder. Laten we een voorbeeld bekijken.

Stel we willen een calculator maken voor de temperatuur van water. Het zal een invoerveld zijn waarin de gebruiker de temperatuur invoert, en een alinea waarin het vonnis wordt weergegeven: water is vloeibaar, water is vast, water is gasvormig.

Stel dat onze calculator een containercomponent Calculator is:

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

Laten we het invoerveld voor de temperatuur in een component TempInp plaatsen, en de alinea met het vonnis - in een component Verdict:

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

Het is gemakkelijk te begrijpen dat zowel TempInp als Verdict state met de temperatuur moeten hebben. Tegelijkertijd is het logisch dat dit dezelfde temperatuur moet zijn: terwijl gegevens worden ingevoerd in het invoerveld, moet het vonnis worden weergegeven.

In dat geval wordt het gebruik van een techniek, genaamd state omhoog brengen, aanbevolen: state, die gemeenschappelijk is voor twee (of meer) componenten, wordt omhoog gebracht naar hun dichtstbijzijnde gemeenschappelijke ouder.

In ons geval zal het blijken dat de state met de temperatuur moet toebehoren aan de component Calculator, die het zal doorgeven aan TempInp en Verdict als props:

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

In de component TempInp moet een invoerveld zitten om de temperatuur te wijzigen. Maar, omdat deze temperatuur een prop van deze component is, kan deze niet direct in TempInp worden gewijzigd. Het is correct om vanuit de component Calculator een speciale functie voor het wijzigen van de temperatuur door te geven:

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

Je kunt overigens geen nieuwe functie introduceren, maar de functie setTemp doorgeven aan de child component:

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

Schrijf de implementatie van de componenten TempInp en Verdict.

Bedenk 3 taken waarin state omhoog brengen moet worden gebruikt. Schrijf de oplossingen voor deze taken.