Створення джерела блогу про планети. Для уникнення передачі пропсів через декілька рівнів компонентів використовується 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 стане завданням у наступному розділі, тож ви зможете додатково розширити функціональність застосунку.