Sollevamento dello Stato in React

Spesso più componenti devono riflettere gli stessi dati in cambiamento. In React è raccomandato sollevare lo stato condiviso fino al più vicino antenato comune. Diamo un'occhiata con un esempio.

Supponiamo di voler creare un calcolatore per la temperatura dell'acqua. Sarà rappresentato da un input, in cui l'utente inserirà la temperatura, e un paragrafo, in cui verrà emesso il verdetto: acqua liquida, acqua solida, acqua gassosa.

Supponiamo che il nostro calcolatore sia un componente contenitore Calculator:

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

Estrapoliamo l'input per l'inserimento della temperatura nel componente TempInp, e il paragrafo con il verdetto - nel componente Verdict:

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

È facile capire che sia TempInp che Verdict devono avere uno stato con la temperatura. Inoltre, è logico che questa debba essere la stessa temperatura: man mano che i dati vengono inseriti nell'input, deve essere visualizzato il verdetto.

In tal caso, è raccomandato utilizzare una tecnica, chiamata sollevamento dello stato: lo stato, condiviso da due (o più) componenti, viene sollevato verso l'alto fino al loro genitore comune.

Nel nostro caso, risulterà che lo stato con la temperatura apparterrà al componente Calculator, che lo passerà a TempInp e Verdict sotto forma di props:

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

Nel componente TempInp ci deve essere un input per modificare la temperatura. Ma, poiché questa temperatura è una prop di questo componente, non è possibile modificarla direttamente in TempInp. Il modo corretto è passare dal componente Calculator una funzione speciale per modificare la temperatura:

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

Si può, tra l'altro, non introdurre una nuova funzione, ma passare al componente figlio la funzione setTemp:

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

Scrivi l'implementazione dei componenti TempInp e Verdict.

Inventa 3 problemi in cui è necessario utilizzare il sollevamento dello stato. Scrivi le soluzioni di questi problemi.