Створимо джерело про планети. Ми будемо використовувати Context, щоб уникнути буріння пропсів. Додаток складатиметься з наступних компонентів: App, Filter, PlanetList і PlanetItem. Для візуалізації їх ієрархії, будь ласка, зверніться до зображення нижче.

Крок 1

Створимо Context у файлі context.js на верхньому рівні.

import { createContext } from "react";

const Context = createContext();

export default Context;

Крок 2

Повідомимо всьому додатку, що ми використовуємо контекст. Отже, нам потрібно обернути весь додаток за допомогою Context.Provider у файлі 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;

Крок 3

На цьому кроці ми повинні встановити дані контексту (проп value для компонента Context.Provider). Почнемо з рендерингу деяких даних. Дані представлені у вигляді масиву об'єктів:

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

Ось що ми зробимо:

Імпортуємо дані з файлу data.js з файлу

import data from "../data";

Ініціалізуємо стан для planets порожнім масивом за допомогою хука useState.

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

Використовуємо хук useEffect для присвоєння імпортованих даних змінній planets. Це гарантує, що ми матимемо дані для рендерингу.

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

Створюємо змінну appData, що представляє всі дані додатку, яка буде об'єктом зі станом planets.

const appData = { planets };

Присвоїмо змінну appData пропу value провайдера контексту.

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

Повний код файлу App.jsx після третього кроку.

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;

Крок 4

Давайте розглянемо компонент PlanetList. Він призначений для відображення певної розмітки. Всередині цієї розмітки ми використовуємо компонент PlanetItem. Варто зазначити, що ми не передаємо ніяких пропсів і не використовуємо контекст всередині цього компонента, оскільки немає необхідності працювати з даними на цьому рівні.

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

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

export default PlanetList;

Крок 5

На цьому кроці нам потрібно отримати доступ до даних, щоб відобразити інформацію про планети. Для цього ми виконаємо такі дії:

Імпортуємо Context з файлу context.js.

import Context from "../context";

Використовуємо хук useContext для отримання даних planets з контексту.

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

Відобразимо розмітку за допомогою функції map, яка дозволяє нам ітераційно переглядати набір даних у React. Застосуємо деструктуризацію, щоб отримати доступ до всіх властивостей кожного об'єкта планети.

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

Повний код файлу PlanetItem.jsx після п'ятого кроку.

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;

Повний код програми:

Будь ласка, знайдіть хвилинку, щоб переглянути весь проект, звернувши увагу на загальну функціональність і структуру. Наразі ми пропонуємо зосередитися на розумінні того, як дані передаються та відображаються в різних компонентах. Зверніть увагу на те, як дані отримуються і використовуються в дочірніх компонентах, за винятком компонента Filter. Компонент Filter буде складним завданням у наступному розділі, щоб ви могли ще більше розширити функціональність програми.