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:

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

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

App.jsximport BigBox from './BigBox';

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

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

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

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

App.jsximport './styles.css';

Agora, crie um componente MiddleBox em um arquivo separado:

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

E vamos colocá-lo na grande caixa BigBox:

BigBox.jsximport MiddleBox from './MiddleBox';

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

Vamos fazer a mesma coisa com a pequena caixinha SmallBox:

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

Vamos colocar duas dessas caixinhas no MiddleBox:

MiddleBox.jsximport 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 :)':

App.jsxfunction 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á:

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

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

SmallBox.jsxfunction 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:

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