La oss lage en bloggkilde om planetene. Vi skal bruke Context for å unngå prop drilling. Appen vil bestå av følgende komponenter: App, Filter, PlanetList og PlanetItem. For å visualisere hierarkiet, vennligst se bildet nedenfor.

Steg 1

Opprett Context i filen context.js på øverste nivå.

import { createContext } from "react";

const Context = createContext();

export default Context;

Steg 2

Gjør hele applikasjonen oppmerksom på at vi bruker context. Derfor må vi pakke hele appen inn i Context.Provider i App.jsx-filen.

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;

Steg 3

I dette steget må vi sette context-dataen (value-prop for Context.Provider-komponenten). Vi starter med å vise noen data. Dataene presenteres som et array av objekter:

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

Dette gjør vi:

Importer data fra data.js-filen

import data from "../data";

Initialiser state for planets som et tomt array ved å bruke useState-hooken.

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

Bruk useEffect-hooken for å tildele de importerte dataene til planets-variabelen. Dette sikrer at vi har data å vise.

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

Opprett variabelen appData, som representerer alle app-dataene, og som vil være et objekt med planets-state.

const appData = { planets };

Tildel appData-variabelen til value-propen til context-provider.

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

Full kode for App.jsx-filen etter steg tre.

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;

Steg 4

La oss se nærmere på PlanetList-komponenten. Formålet er å gjengi en spesifikk markup. Inne i denne markuppen bruker vi PlanetItem-komponenten. Det er verdt å merke seg at vi ikke sender noen props eller bruker context i denne komponenten, siden det ikke er behov for å jobbe med data på dette nivået.

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

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

export default PlanetList;

Steg 5

I dette steget må vi få tilgang til dataene for å vise informasjon om planetene. For å gjøre dette følger vi disse trinnene:

Importer Context fra context.js-filen.

import Context from "../context";

Bruk useContext-hooken for å hente planets-dataene fra context.

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

Render markup ved å bruke map-funksjonen, som lar oss iterere over datasettet i React. Bruk destrukturering for å få tilgang til alle egenskapene til hvert planet-objekt.

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

Fullstendig kode for PlanetItem.jsx-filen etter steg fem.

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;

Fullstendig app-kode:

Ta gjerne en gjennomgang av hele prosjektet, og legg merke til den overordnede funksjonaliteten og strukturen. For nå anbefales det å fokusere på å forstå hvordan dataene sendes og vises i de ulike komponentene. Merk hvordan dataene hentes og brukes i barnekomponentene, med unntak av Filter-komponenten. Filter-komponenten vil være en utfordring i neste kapittel, slik at du kan videreutvikle appens funksjonalitet.