Laten we een blogbron maken over de planeten. We gebruiken Context om prop drilling te voorkomen. De app zal bestaan uit de volgende componenten: App, Filter, PlanetList en PlanetItem. Raadpleeg de onderstaande afbeelding om hun hiërarchie te visualiseren.

Stap 1

Maak de Context aan in het bestand context.js op het hoogste niveau.

import { createContext } from "react";

const Context = createContext();

export default Context;

Stap 2

Laat de gehele app weten dat we context gebruiken. We moeten daarom de hele app omwikkelen met de Context.Provider in het bestand 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;

Stap 3

In deze stap moet de data van de context worden ingesteld (de value prop voor het Context.Provider component). Begin met het renderen van enkele gegevens. De gegevens worden gepresenteerd als een array van objecten:

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

Uit te voeren stappen:

Importeer de data uit het bestand data.js

import data from "../data";

Initialiseer de state voor planets als een lege array met behulp van de useState hook.

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

Gebruik de useEffect hook om de geïmporteerde data toe te wijzen aan de variabele planets. Dit zorgt ervoor dat er data beschikbaar is om te renderen.

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

Maak de variabele appData aan, die de volledige app-data voorstelt, als een object met de state planets.

const appData = { planets };

Wijs de variabele appData toe aan de value prop van de context provider.

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

Volledige code van het bestand App.jsx na stap drie.

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;

Stap 4

Bekijk het PlanetList component. Het doel hiervan is het renderen van specifieke markup. Binnen deze markup wordt het PlanetItem component gebruikt. Opmerkelijk is dat er geen props worden doorgegeven of context wordt gebruikt binnen dit component, omdat het op dit niveau niet nodig is om met data te werken.

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

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

export default PlanetList;

Stap 5

In deze stap moet toegang worden verkregen tot de data om de informatie over de planeten te renderen. Volg hiervoor de volgende stappen:

Importeer de Context uit het bestand context.js.

import Context from "../context";

Gebruik de useContext hook om de planets data uit de context te halen.

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

Render de markup met behulp van de map functie, waarmee over de dataset in React kan worden geïtereerd. Gebruik destructuring om toegang te krijgen tot alle eigenschappen van elk planeetobject.

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

Volledige code van het bestand PlanetItem.jsx na stap vijf.

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;

Volledige app-code:

Neem even de tijd om het volledige project te bekijken, met aandacht voor de algemene functionaliteit en structuur. Richt je voorlopig op het begrijpen van hoe de data wordt doorgegeven en weergegeven in de verschillende componenten. Let op hoe de data wordt verkregen en gebruikt in de kindcomponenten, met uitzondering van de Filter-component. De Filter-component vormt een uitdaging in het volgende hoofdstuk, zodat je de functionaliteit van de app verder kunt uitbreiden.