Elevación de estado en React

A menudo, varios componentes deben reflejar los mismos datos cambiantes. En React se recomienda elevar el estado compartido al antecesor común más cercano. Veamos un ejemplo.

Supongamos que queremos hacer una calculadora de temperatura del agua. Consistirá en un input, en el que el usuario introducirá la temperatura, y un párrafo, en el que se mostrará el veredicto: agua líquida, agua sólida, agua gaseosa.

Supongamos que nuestra calculadora es un contenedor de componentes Calculator:

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

Extraigamos el input para introducir la temperatura en el componente TempInp, y el párrafo con el veredicto - en el componente Verdict:

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

Es fácil entender que tanto TempInp como Verdict deben tener un estado con la temperatura. Además, es lógico que esta debe ser la misma temperatura: a medida que se introducen datos en el input, debe mostrarse el veredicto.

En tal caso, se recomienda utilizar una técnica llamada elevación de estado: el estado, común para dos (o más) componentes, se eleva hacia arriba hasta su padre común.

En nuestro caso, resultará que el estado con la temperatura debe pertenecer al componente Calculator, que lo pasará a TempInp y Verdict como props:

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

En el componente TempInp debe haber un input para cambiar la temperatura. Pero, como esta temperatura es un prop de este componente, no se puede cambiar directamente en TempInp. Lo correcto sería pasar desde el componente Calculator una función especial para cambiar 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>;
}

Por cierto, se puede no introducir una nueva función, y pasar al componente hijo la función setTemp:

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

Escriba la implementación de los componentes TempInp y Verdict.

Piense en 3 problemas en los que sea necesario utilizar la elevación de estado. Escriba las soluciones a estos problemas.