Atualização de Contexto no React

Nesta lição, veremos a atualização de componentes quando o valor do contexto muda. Suponha que você queira que o contexto mude.

Nesse caso, é útil aplicar o contexto em conjunto com estados. Vamos modificar um pouco nossa aplicação das caixas que fizemos na lição anterior e fazer com que, ao clicar em um botão, o valor passado se torne 'metal box :)'.

Então, vamos pegar nosso arquivo App e após BigBox desenhar um botão:

function App() {
	return (
		<MyContext.Provider value="small box :)">
			<BigBox />
			<button>click</button>
		</MyContext.Provider>
	);
}

Em seguida, vamos importar o hook useState e criar um estado name, cujo valor será alterado ao clicar no botão. Vamos definir seu valor inicial como aquele que passamos diretamente como valor do contexto, ou seja, 'small box :)':

function App() {
	const [name, setName] = useState('small box :)');
}

Desta vez, passaremos como contexto não a string, mas o estado name:

<MyContext.Provider value={name}>
	<BigBox />
	<button>click</button>
</MyContext.Provider>

Como último passo, vamos chamar o manipulador de clique do botão e usar a função setName para definir o novo valor do estado como 'metal box :)'. Depois disso, você poderá clicar no botão e verificar o resultado:

<button onClick={() => {
	setName('metal box :)');
}}>click</button>

Use o aplicativo criado por você na resolução das tarefas da lição anterior. Crie um estado age que você passará, em vez do número, por meio do contexto de App, defina seu valor inicial como 50. Adicione abaixo do componente Parent em App um botão que, a cada clique, diminui o valor do estado age em 2.