Créons une source de blog sur les planètes. Nous utiliserons Context pour éviter le passage de props. L'application se composera des composants suivants : App, Filter, PlanetList et PlanetItem. Pour visualiser leur hiérarchie, veuillez vous référer à l'image ci-dessous.

Étape 1

Créez le Context dans le fichier context.js au niveau supérieur.

import { createContext } from "react";

const Context = createContext();

export default Context;

Étape 2

Informez l'ensemble de l'application que nous utilisons le contexte. Donc, nous devons envelopper toute l'application avec le Context.Provider dans le fichier 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;

Étape 3

À cette étape, nous devons définir les données du contexte (prop value pour le composant Context.Provider). Commençons par rendre quelques données. Les données sont présentées sous la forme d'un tableau d'objets :

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",
  },
... 
  {...}
];

Voici ce que nous allons faire :

Importer les données du fichier data.js

import data from "../data";

Initialiser l'état pour les planets comme un tableau vide en utilisant le hook useState.

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

Utiliser le hook useEffect pour assigner les données importées à la variable planets. Cela garantit que nous avons des données à rendre.

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

Créer la variable appData, représentant toutes les données de l'application, qui sera un objet avec l'état planets.

const appData = { planets };

Assigner la variable appData à la prop value du fournisseur de contexte.

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

Code complet du fichier App.jsx après l'étape trois.

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;

Étape 4

Jetons un coup d'œil au composant PlanetList. Son but est de rendre un balisage spécifique. À l'intérieur de ce balisage, nous utilisons le composant PlanetItem. Il est à noter que nous ne passons aucun prop ni n'utilisons le contexte dans ce composant car il n'est pas nécessaire de travailler avec des données à ce niveau.

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

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

export default PlanetList;

Étape 5

Dans cette étape, nous devons accéder aux données afin de rendre les informations sur les planètes. Pour ce faire, nous allons suivre ces étapes :

Importer le Context du fichier context.js.

import Context from "../context";

Utiliser le hook useContext pour récupérer les données planets du contexte.

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

Rendre le balisage en utilisant la fonction map, qui nous permet d'itérer sur l'ensemble de données dans React. Appliquer la déstructuration pour accéder à toutes les propriétés de chaque objet planète.

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>
      )
    )}
  </>
);

Code complet du fichier PlanetItem.jsx après l'étape cinq.

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;

Code complet de l'application :

Veuillez prendre un moment pour examiner l'ensemble du projet, en prêtant attention à la fonctionnalité globale et à la structure. Pour l'instant, il est suggéré de se concentrer sur la compréhension de la manière dont les données sont transmises et rendues dans les différents composants. Notez comment les données sont obtenues et utilisées dans les composants enfants, à l'exclusion du composant Filter. Le composant Filter sera un défi dans le prochain chapitre, vous pourrez donc améliorer davantage la fonctionnalité de l'application.