Creiamo una fonte blog sui pianeti. Utilizzeremo il Context per evitare il prop drilling. L'app sarà composta dai seguenti componenti: App, Filter, PlanetList e PlanetItem. Per visualizzare la loro gerarchia, fare riferimento all'immagine sottostante.

Passaggio 1

Creare il Context nel file context.js a livello superiore.

import { createContext } from "react";

const Context = createContext();

export default Context;

Passaggio 2

Rendere l'intera app consapevole dell'utilizzo del context. È quindi necessario avvolgere tutta l'app con Context.Provider nel file 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;

Passaggio 3

In questo passaggio, è necessario impostare i dati del contesto (proprietà value per il componente Context.Provider). Iniziamo visualizzando alcuni dati. I dati sono presentati sotto forma di array di oggetti:

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

Procedura da seguire:

Importare i dati dal file data.js

import data from "../data";

Inizializzare lo stato per planets come array vuoto utilizzando l'hook useState.

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

Utilizzare l'hook useEffect per assegnare i dati importati alla variabile planets. Questo garantisce la disponibilità dei dati da visualizzare.

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

Creare la variabile appData, che rappresenta tutti i dati dell'applicazione, come oggetto contenente lo stato planets.

const appData = { planets };

Assegnare la variabile appData alla proprietà value del provider del contesto.

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

Codice completo del file App.jsx dopo il terzo passaggio.

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;

Passaggio 4

Analisi del componente PlanetList. Il suo scopo è rendere un markup specifico. All'interno di questo markup viene utilizzato il componente PlanetItem. Si noti che non vengono passate proprietà né viene utilizzato il contesto all'interno di questo componente, poiché non è necessario lavorare con i dati a questo livello.

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

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

export default PlanetList;

Passaggio 5

In questo passaggio, è necessario accedere ai dati per visualizzare le informazioni sui pianeti. Per farlo, seguire questi passaggi:

Importare il Context dal file context.js.

import Context from "../context";

Utilizzare l'hook useContext per recuperare i dati planets dal contesto.

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

Visualizzare il markup utilizzando la funzione map, che consente di iterare sull'insieme di dati in React. Applicare la destrutturazione per accedere a tutte le proprietà di ciascun oggetto pianeta.

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

Codice completo del file PlanetItem.jsx dopo il quinto passaggio.

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;

Codice completo dell'app:

Si consiglia di esaminare l'intero progetto, prestando attenzione alla funzionalità generale e alla struttura. Per il momento, è opportuno concentrarsi sulla comprensione di come i dati vengono passati e visualizzati nei diversi componenti. Osservare come i dati vengono ottenuti e utilizzati nei componenti figli, ad eccezione del componente Filter. Il componente Filter sarà oggetto di una sfida nel prossimo capitolo, offrendo così l'opportunità di migliorare ulteriormente la funzionalità dell'app.