Crearemos una fuente de blog sobre los planetas. Utilizaremos Context para evitar el paso de props innecesario. 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 utilizando context. Por lo tanto, necesitamos 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 context (propiedad value para el componente Context.Provider). Comencemos renderizando algunos datos. Los datos se presentan en forma de un 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",
  },
... 
  {...}
];

Esto es lo que haremos:

Importar los datos desde el archivo data.js

import data from "../data";

Inicializar el estado para planets como un array 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 context.

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 señalar que no pasamos props ni utilizamos context dentro de este componente, ya que no es necesario trabajar con 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, es necesario acceder a los datos para renderizar la información sobre los planetas. Para ello, se seguirán los siguientes 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 permite iterar sobre el conjunto de datos en React. Aplicar desestructuració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:

Se recomienda revisar el proyecto completo, prestando atención a la funcionalidad general y la estructura. Por el momento, 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 siguiente capítulo, por lo que podrá mejorar aún más la funcionalidad de la aplicación.