Elevação de Estado no React

Frequentemente, vários componentes precisam refletir os mesmos dados em mudança. No React, é recomendado elevar o estado compartilhado para o ancestral comum mais próximo. Vamos ver um exemplo.

Suponha que queremos fazer uma calculadora de temperatura da água. Ela será composta por um input, no qual o usuário irá inserir a temperatura, e um parágrafo, no qual será exibido o veredito: água líquida, água sólida, água gasosa.

Suponha que nossa calculadora seja um componente contêiner Calculator:

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

Vamos extrair o input para inserir a temperatura para o componente TempInp, e o parágrafo com o veredito - para o componente Verdict:

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

É fácil entender que tanto TempInp quanto Verdict devem ter um estado com a temperatura. Ao mesmo tempo, é lógico que esta deve ser a mesma temperatura: à medida que os dados são inseridos no input, o veredito deve ser exibido.

Nesse caso, é recomendado usar uma técnica chamada elevação de estado: o estado, compartilhado por dois (ou mais) componentes, é elevado para cima, até seu ancestral comum.

No nosso caso, resultará que o estado com a temperatura deve pertencer ao componente Calculator, que o passará para TempInp e Verdict como props:

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

No componente TempInp deve haver um input para alterar a temperatura. Mas, como essa temperatura é uma prop deste componente, não é possível alterá-la diretamente em TempInp. O correto será passar do componente Calculator uma função específica para alterar a 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>;
}

Pode-se, aliás, não criar uma nova função, e passar para o componente filho a função setTemp:

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

Escreva a implementação dos componentes TempInp e Verdict.

Invente 3 tarefas nas quais seja necessário usar a elevação de estado. Escreva as soluções dessas tarefas.