Vamos criar uma fonte de blog sobre os planetas. Utilizaremos o Context para evitar o prop drilling. O aplicativo será composto pelos seguintes componentes: App, Filter, PlanetList e PlanetItem. Para visualizar a hierarquia entre eles, consulte a imagem abaixo.

Passo 1

Crie o Context no arquivo context.js no nível superior.

import { createContext } from "react";

const Context = createContext();

export default Context;

Passo 2

Informe a todo o aplicativo que estamos utilizando o context. Portanto, é necessário envolver todo o aplicativo com o Context.Provider no arquivo App.jsx.

import React from "react";
import Context from "../context";
import Filter from "../Filter/Filter";
import PlanetList from "../PlanetList/PlanetList";

const App = () => {
  return (
    <Context.Provider>
      <div>
        <Filter />
        <PlanetList />
      </div>
    </Context.Provider>
  );
};

export default App;

Passo 3

Neste passo, é necessário definir os dados do contexto (propriedade value para o componente Context.Provider). Vamos começar renderizando alguns dados. Os dados são apresentados na forma de um array de objetos:

const planetData = [
  {
    id: "3a6d44da-bbe2-4ac2-a622-7ca5f321b71c",
    name: "Mercury",
    weight: "3.3011 × 10^23 kg",
    size: "4,879 km",
    distanceFromSun: "57.9 million km",
    material: "Rocky",
    image:
      "https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/react/react-hooks-%26-context/mercury.png",
    existenceYears: "4.5 billion years",
  },
... 
  {...}
];

Procedimentos a serem realizados:

Importar os dados do arquivo data.js

import data from "../data";

Inicializar o estado para planets como um array vazio utilizando o hook useState.

import React, { useState } from "react";
// ...
const [planets, setPlanets] = useState([]);

Utilizar o hook useEffect para atribuir os dados importados à variável planets. Isso garante que haverá dados para renderizar.

import React, { useState, useEffect } from "react";
// ...
  useEffect(() => {
    setPlanets(data);
  }, []);

Criar a variável appData, representando todos os dados do aplicativo, que será um objeto com o estado planets.

const appData = { planets };

Atribuir a variável appData à propriedade value do provider do contexto.

return (
  <Context.Provider value={appData}>
    <div>
      <Filter />
      <PlanetList />
    </div>
  </Context.Provider>
);

Código completo do arquivo App.jsx após o passo três.

import React, { useEffect, useState } from "react";
import Context from "../context";
import data from "../data";
import Filter from "../Filter/Filter";
import PlanetList from "../PlanetList/PlanetList";

const App = () => {
  const [planets, setPlanets] = useState([]);

  useEffect(() => {
    setPlanets(data);
  }, []);

  const appData = { planets };

  return (
    <Context.Provider value={appData}>
      <div>
        <Filter />
        <PlanetList />
      </div>
    </Context.Provider>
  );
};

export default App;

Passo 4

Análise do componente PlanetList. Sua finalidade é renderizar uma marcação específica. Dentro dessa marcação, é utilizado o componente PlanetItem. Vale ressaltar que não são passadas props nem utilizado o contexto neste componente, pois não há necessidade de manipular dados neste nível.

import React from "react";
import PlanetItem from "../PlanetItem/PlanetItem";

const PlanetList = () => {
  return (
    <ul>
      <PlanetItem />
    </ul>
  );
};

export default PlanetList;

Passo 5

Neste passo, é necessário acessar os dados para renderizar as informações sobre os planetas. Para isso, siga os procedimentos abaixo:

Importar o Context do arquivo context.js.

import Context from "../context";

Utilizar o hook useContext para obter os dados de planets do contexto.

import React, { useContext } from "react";
// ...
const { planets } = useContext(Context);

Renderizar a marcação utilizando a função map, que permite iterar sobre o conjunto de dados no React. Aplicar destructuring para acessar todas as propriedades de cada objeto planeta.

return (
  <>
    {planets.map(
      ({
        id,
        name,
        weight,
        size,
        distanceFromSun,
        material,
        image,
        existenceYears,
      }) => (
        <li key={id}>
          <img src={image} alt={name} width={160} />
          <div>
            <h3>{name}</h3>
            <p>
              Weight: <span>{weight}</span>
            </p>
            <p>
              Size: <span>{size}</span>
            </p>
            <p>
              Distance form Sun: <span>{distanceFromSun}</span>
            </p>
            <p>
              Material: <span>{material}</span>
            </p>
            <p>
              Old: <span>{existenceYears}</span>
            </p>
          </div>
        </li>
      )
    )}
  </>
);

Código completo do arquivo PlanetItem.jsx após o passo cinco.

import React, { useContext } from "react";
import Context from "../context";

const PlanetItem = () => {
  const { planets } = useContext(Context);

  return (
    <>
      {planets.map(
        ({
          id,
          name,
          weight,
          size,
          distanceFromSun,
          material,
          image,
          existenceYears,
        }) => (
          <li key={id}>
            <img src={image} alt={name} width={160} />
            <div>
              <h3>{name}</h3>
              <p>
                Weight: <span>{weight}</span>
              </p>
              <p>
                Size: <span>{size}</span>
              </p>
              <p>
                Distance form Sun: <span>{distanceFromSun}</span>
              </p>
              <p>
                Material: <span>{material}</span>
              </p>
              <p>
                Old: <span>{existenceYears}</span>
              </p>
            </div>
          </li>
        )
      )}
    </>
  );
};

export default PlanetItem;

Código completo do aplicativo:

Reserve um momento para revisar todo o projeto, observando a funcionalidade geral e a estrutura. Por enquanto, recomenda-se focar em compreender como os dados são passados e renderizados nos diferentes componentes. Observe como os dados são obtidos e utilizados nos componentes filhos, com exceção do componente Filter. O componente Filter será um desafio no próximo capítulo, permitindo aprimorar ainda mais a funcionalidade do aplicativo.