Vamos a crear una fuente de blog sobre los planetas. Usaremos Context para evitar el paso de props innecesario (prop drilling). La aplicación constará de los siguientes componentes: App, Filter, PlanetList y PlanetItem. Para visualizar su jerarquía, consulte la imagen a continuación.

Paso 1

Crear el Context en el archivo context.js en el nivel superior.

import { createContext } from "react";

const Context = createContext();

export default Context;

Paso 2

Permitir que toda la aplicación sepa que estamos usando context. Por lo tanto, es necesario envolver toda la aplicación con el Context.Provider en el archivo 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;

Paso 3

En este paso, debemos establecer los datos del contexto (propiedad value para el componente Context.Provider). Comencemos renderizando algunos datos. Los datos se presentan en forma de un arreglo 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",
  },
... 
  {...}
];

Esto es lo que haremos:

Importar los datos desde el archivo data.js

import data from "../data";

Inicializar el estado para planets como un arreglo vacío utilizando el hook useState.

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

Utilizar el hook useEffect para asignar los datos importados a la variable planets. Esto asegura que tengamos datos para renderizar.

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

Crear la variable appData, que representa todos los datos de la aplicación, la cual será un objeto con el estado planets.

const appData = { planets };

Asignar la variable appData a la propiedad value del proveedor de contexto.

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

Código completo del archivo App.jsx después del paso tres.

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;

Paso 4

Analicemos el componente PlanetList. Su propósito es renderizar un marcado específico. Dentro de este marcado, utilizamos el componente PlanetItem. Es importante notar que no pasamos props ni utilizamos el contexto dentro de este componente, ya que no es necesario trabajar con los datos en este nivel.

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

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

export default PlanetList;

Paso 5

En este paso, necesitamos acceder a los datos para renderizar la información sobre los planetas. Para ello, seguiremos estos pasos:

Importar el Context desde el archivo context.js.

import Context from "../context";

Utilizar el hook useContext para obtener los datos de planets desde el contexto.

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

Renderizar el marcado utilizando la función map, que nos permite iterar sobre el conjunto de datos en React. Aplicar destructuración para acceder a todas las propiedades 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 del archivo PlanetItem.jsx después del paso 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 de la aplicación:

Por favor, tómese un momento para revisar el proyecto completo, prestando atención a la funcionalidad general y la estructura. Por ahora, se sugiere enfocarse en comprender cómo se pasan y renderizan los datos en los diferentes componentes. Observe cómo se obtienen y utilizan los datos en los componentes hijos, excluyendo el componente Filter. El componente Filter será un desafío en el próximo capítulo, por lo que podrá mejorar aún más la funcionalidad de la aplicación.