O Hook de Contexto useContext no React

Nesta lição, continuaremos trabalhando com contexto. Agora vamos construir uma árvore de componentes. Para começar, crie um componente React BigBox em um arquivo separado:

function BigBox() {
	return (
		<p>bigbox</p>
	);
}

Vamos importá-lo e colocá-lo em nosso componente principal App:

import BigBox from './BigBox';

function App() {
	return (
		<BigBox />
	);
}

Para maior clareza, vamos aplicar alguns estilos aos divs. Para isso, crie um arquivo styles.css:

div {
	border: 1px solid blue;
	margin: 10px;
	text-align: center;
	max-width: 300px;
}

Vamos lembrar de importá-lo em App.js:

import './styles.css';

Agora, crie um componente MiddleBox em um arquivo separado:

function MiddleBox() {
	return (
		<p>middlebox</p>
	);
}

E vamos colocá-lo na grande caixa BigBox:

import MiddleBox from './MiddleBox';

function BigBox() {
	return (
		<div>
			<MiddleBox />
		</div>
	);
}

Vamos fazer a mesma coisa com a pequena caixinha SmallBox:

function SmallBox() {
	return (
		<p>Eu sou ... </p>
	);
}

Vamos colocar duas dessas caixinhas no MiddleBox:

import SmallBox from './SmallBox';

function MiddleBox() {
	return (
		<div>
			<SmallBox />
			<SmallBox />
		</div>
	);
}

A árvore está construída. E agora nós queremos passar do nosso App, digamos, para o SmallBox um valor de string 'small box :)', sem usar props, mas usando contexto (caso nosso aplicativo de caixas cresça para um tamanho enorme).

Já criamos e conectamos o arquivo de contexto MyContext.js na lição anterior.

O próximo passo que daremos - é envolver BigBox no provedor de contexto, que é uma propriedade do nosso objeto de contexto MyContext. Agora todos os componentes envolvidos por esta construção (e isso inclui todas as caixas aninhadas dentro de BigBox) poderão acessar e se inscrever para mudanças no contexto. Como valor do contexto, passamos o desejado 'small box :)':

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

E agora só falta ler o valor do contexto. Queríamos usá-lo no SmallBox, então vamos importar o arquivo de contexto MyContext.js e o hook useContext para lá:

import { useContext } from 'react';
import { MyContext } from './MyContext.js';

Vamos ler usando useContext o valor do contexto na variável name:

function SmallBox() {
	const name = useContext(MyContext);
	
	return (
		<div>
			<p>Eu sou ... </p>
		</div>
	);
}

Nós inscrevemos o SmallBox neste contexto e, se ele mudar, este componente também será atualizado.

E, finalmente, substituímos o valor da variável name no lugar das reticências:

function SmallBox() {
	const name = useContext(MyContext);
	
	return (
		<div>
			<p>Eu sou {name} </p>
		</div>
	);
}

No componente vazio App, crie um componente Parent, e dentro dele um componente Daughter, e em Daughter um componente Grandson. Usando contexto, passe de App o valor de idade 42, e com useContext exiba-o no componente Daughter.

E agora, no componente Grandson, exiba o valor da idade, mas dividido por 2.