Існує чотири способи встановити властивість стилю backgroundImage за допомогою вбудованого CSS у React.

Цей посібник покаже вам усі чотири методи зі зразками коду для кожного.

Як встановити фонове зображення в React за допомогою зовнішньої URL-адреси

Якщо ваше зображення знаходиться десь в інтернеті, ви можете встановити фонове зображення свого елемента, розмістивши URL-адресу таким чином:

function App() {
  return (
    <div style={{ 
      backgroundImage: `url("https://via.placeholder.com/500")` 
    }}>
      Hello World
    </div>
  );
}

Наведений вище код відтворить єдиний елемент <div> із застосованим до нього стилем background-image: url(https://via.placeholder.com/500).

Як встановити фонове зображення в React з вашої папки /src

Якщо ви завантажуєте свою програму за допомогою Create React App і маєте своє зображення в папці src/, ви можете спочатку виконати import зображення, а потім розмістити його як фон свого елемента:

import React from "react";
import background from "./img/placeholder.png";

function App() {
  return (
    <div style={{ backgroundImage: `url(${background})` }}>
      Hello World
    </div>
  );
}

export default App;

Коли ви виконаєте команду npm start, React покаже помилку «Failed to Compile» і зупинить збірку, якщо зображення не знайдено:

Таким чином ви не відображатимете пошкоджені посилання на зображення у своєму вебзастосунку. У наведеному вище коді значення backgroundImage встановлюється за допомогою рядка шаблону, що дозволяє вставляти вирази JavaScript.

Як встановити фонове зображення в React за допомогою методу відносної URL-адреси

Папку public/ можна використовувати для додавання статичних ресурсів до програми React. Будь-які файли, які ви поміщаєте в папку, будуть доступними в інтернеті.

Якщо ви помістите файл image.png у папку public/, ви зможете отримати доступ до нього за адресою <your host address>/image.png. Під час запуску React на локальному комп’ютері зображення має бути за адресою http://localhost:3000/image.png.

Потім ви можете призначити URL-адресу відносно адреси хосту, щоб встановити фонове зображення. Ось приклад:

<div style={{ backgroundImage: "url(/image.png)" }}>
  Hello World
</div>

Встановивши URL-шлях до /image.png як у прикладі вище, вебпереглядач шукатиме фонове зображення за <your host address>/image.png.

Ви також можете створити іншу папку всередині public/, якщо хочете впорядкувати зображення в папки. Наприклад:

Не забудьте змінити значення backgroundImage на url(/img/image.png), якщо вирішите створити папку.

Як встановити фонове зображення в React за допомогою методу абсолютної URL-адреси

Ви також можете включити абсолютну URL-адресу, використовуючи змінну середовища PUBLIC_URL у Create React App, ось так:

<div style={{ 
  backgroundImage: `url(${process.env.PUBLIC_URL + '/image.png'})` 
}}>
  Hello World
</div>

Коли ви запустите це на своєму локальному комп’ютері, сценарії React оброблятимуть значення PUBLIC_URL. Коли ви запускаєте його локально, він виглядатиме як відносна URL-адреса, а не як абсолютна URL-адреса:

Абсолютну URL-адресу можна буде побачити лише під час розгортання React у робочій програмі пізніше.

Як встановити фонове зображення з додатковими властивостями

Якщо ви хочете додатково налаштувати фонове зображення, це можна зробити, додавши додаткові властивості після backgroundImage. Ось приклад:

<div style={{ 
  backgroundImage: `url(${process.env.PUBLIC_URL + '/image.png'})`,
  backgroundRepeat: 'no-repeat',
  width:'250px' 
}}>
  Hello World
</div>

Встановлені вище властивості додаватимуть властивості background-repeat: no-repeat та width: 250px разом із background-image до елементу <div>.

Дякую, що прочитали, і сподіваюся, ця стаття була для вас корисною. Якщо у вас є запитання, ви можете знайти мене в твіттері. Час від часу я також буду ділитися деякими короткими порадами для розробників. 🙂

Робота з кількома прапорцями в React повністю відрізняється від того, як ви використовуєте звичайні прапорці HTML.

Тому в цьому посібнику ми побачимо, як працювати з кількома прапорцями в React.

Ви дізнаєтесь:

• як використовувати прапорець як контрольований компонент у React
• як використовувати методи масиву map та reduce для складних обчислень
• як створити масив певної довжини, попередньо заповнений певним значенням

та багато іншого.

Ця стаття є частиною мого курсу Mastering Redux. Ось попередній перегляд програми, яку ми будемо створювати на курсі.

Тож почнемо.

Як працювати з одним прапорцем

Давайте почнемо з функціональності одного прапорця, перш ніж переходити до кількох.

У цій статті я буду використовувати синтаксис React Hooks для створення компонентів. Отже, якщо ви не знайомі з хуками React, перегляньте мою статтю «Вступ до хуків React».

Подивіться на наведений нижче код:

<div className="App">
  Select your pizza topping:
  <div className="topping">
    <input type="checkbox" id="topping" name="topping" value="Paneer" />Paneer
  </div>
</div>

Ось демоверсія на Code Sandbox.

У наведеному вище коді ми щойно оголосили один прапорець, який подібний до того, як ми оголошуємо прапорець HTML.

Тож ми можемо легко встановити та зняти прапорець, як показано нижче:

Але щоб відобразити на екрані позначений прапорець чи ні, нам потрібно перетворити його на контрольований компонент.

У React контрольований компонент керується станом, тому вхідне значення можна змінити, лише змінивши стан, пов’язаний із цим введенням.

Подивіться на наведений нижче код:

export default function App() {
  const [isChecked, setIsChecked] = useState(false);

  const handleOnChange = () => {
    setIsChecked(!isChecked);
  };

  return (
    <div className="App">
      Select your pizza topping:
      <div className="topping">
        <input
          type="checkbox"
          id="topping"
          name="topping"
          value="Paneer"
          checked={isChecked}
          onChange={handleOnChange}
        />
        Paneer
      </div>
      <div className="result">
        Above checkbox is {isChecked ? "checked" : "un-checked"}.
      </div>
    </div>
  );
}

Ось демоверсія на Code Sandbox.

У наведеному вище коді ми оголосили стан isChecked у компоненті з початковим значенням false за допомогою хука useState :

const [isChecked, setIsChecked] = useState(false);

Потім для прапорця вводу ми встановили два додаткові параметри checked та onChange таким чином:

<input
  ...
  checked={isChecked}
  onChange={handleOnChange}
/>

Щоразу, коли ми натискаємо прапорець, буде викликана функція обробки handleOnChange, яку ми використовуємо для встановлення значення стану  isChecked.

const handleOnChange = () => {
  setIsChecked(!isChecked);
};

Отже, якщо прапорець позначено, ми встановлюємо значення isChecked на false. Але якщо прапорець знятий, ми встановлюємо значення true за допомогою !isChecked. Потім ми передаємо це значення в прапорець введення для перевіреного параметру checked.

Таким чином прапорець вводу стає контрольованим компонентом, значенням якого керує стан.

Зверніть увагу, що в React завжди рекомендується використовувати контрольовані компоненти для полів введення, навіть якщо код виглядає складним. Це гарантує, що зміна вхідних даних відбувається лише всередині обробника onChange.

Стан введення не буде змінено будь-яким іншим способом, і ви завжди отримуватимете правильне й оновлене значення стану введення.

Лише в рідкісних випадках ви можете використовувати React ref для неконтрольованого використання компоненту.

Як обробляти кілька прапорців

Тепер давайте розглянемо, як ви будете обробляти кілька прапорців.

Подивіться на приклад у Code Sandbox.

Тут ми показуємо список топінгів і відповідну ціну. Виходячи з того, які топінги вибрано, нам потрібно відобразити загальну суму.

Раніше з одним прапорцем ми мали лише стан isChecked, і ми змінювали стан прапорця на основі цього.

Але тепер у нас багато прапорців, тому додавати кілька викликів useState для кожного прапорця непрактично.

Отже, давайте оголосимо масив у стані, що вказує стан кожного прапорця.

Щоб створити масив, довжина якого дорівнює кількості прапорців, ми можемо використати метод fill:

const [checkedState, setCheckedState] = useState(
    new Array(toppings.length).fill(false)
);

Тут ми оголосили стан із початковим значенням у вигляді масиву, заповненого значенням false.

Отже, якщо ми маємо 5 топінгів, масив станів checkedState міститиме 5 значень false, як наведено нижче:

[false, false, false, false, false]

І як тільки ми поставимо/знімемо прапорець, ми змінимо відповідний стан  false на true або true на false.

Тут наведено остаточний код на Code Sandbox.

Повний код App.js виглядає так:

import { useState } from "react";
import { toppings } from "./utils/toppings";
import "./styles.css";

const getFormattedPrice = (price) => `$${price.toFixed(2)}`;

export default function App() {
  const [checkedState, setCheckedState] = useState(
    new Array(toppings.length).fill(false)
  );

  const [total, setTotal] = useState(0);

  const handleOnChange = (position) => {
    const updatedCheckedState = checkedState.map((item, index) =>
      index === position ? !item : item
    );

    setCheckedState(updatedCheckedState);

    const totalPrice = updatedCheckedState.reduce(
      (sum, currentState, index) => {
        if (currentState === true) {
          return sum + toppings[index].price;
        }
        return sum;
      },
      0
    );

    setTotal(totalPrice);
  };

  return (
    <div className="App">
      <h3>Select Toppings</h3>
      <ul className="toppings-list">
        {toppings.map(({ name, price }, index) => {
          return (
            <li key={index}>
              <div className="toppings-list-item">
                <div className="left-section">
                  <input
                    type="checkbox"
                    id={`custom-checkbox-${index}`}
                    name={name}
                    value={name}
                    checked={checkedState[index]}
                    onChange={() => handleOnChange(index)}
                  />
                  <label htmlFor={`custom-checkbox-${index}`}>{name}</label>
                </div>
                <div className="right-section">{getFormattedPrice(price)}</div>
              </div>
            </li>
          );
        })}
        <li>
          <div className="toppings-list-item">
            <div className="left-section">Total:</div>
            <div className="right-section">{getFormattedPrice(total)}</div>
          </div>
        </li>
      </ul>
    </div>
  );
}

Давайте розберемося, що ми тут робимо.

Ми оголосили прапорець вводу, як показано нижче:

<input
  type="checkbox"
  id={`custom-checkbox-${index}`}
  name={name}
  value={name}
  checked={checkedState[index]}
  onChange={() => handleOnChange(index)}
/>

Тут ми додали атрибут checked із відповідним значенням true або false зі стану checkedState. Отже, кожен прапорець матиме правильне значення свого позначеного стану.

Ми також додали обробник onChange і передаємо index прапорця, який позначено/знято, до методу handleOnChange.

Обробник методу handleOnChange має наступний вигляд:

const handleOnChange = (position) => {
  const updatedCheckedState = checkedState.map((item, index) =>
    index === position ? !item : item
  );

  setCheckedState(updatedCheckedState);

  const totalPrice = updatedCheckedState.reduce(
    (sum, currentState, index) => {
      if (currentState === true) {
        return sum + toppings[index].price;
      }
      return sum;
    },
    0
  );

  setTotal(totalPrice);
};

Тут ми спочатку спочатку проходимось по масиву checkedState, використовуючи метод масивів map. Якщо значення переданого параметра position збігається з поточним індексом, ми змінюємо його значення. Потім, якщо значення є true, воно буде перетворено на false за допомогою !item, а якщо значення false — воно буде перетворено на true.

Якщо index не збігається з наданим параметром position, ми не змінюємо його значення, а просто повертаємо значення, яким воно є.

const updatedCheckedState = checkedState.map((item, index) =>
  index === position ? !item : item
);

// the above code is the same as the below code

const updatedCheckedState = checkedState.map((item, index) => {
  if (index === position) {
    return !item;
  } else {
    return item;
  }
});

Я використовував тернарний оператор ?:, оскільки він робить код коротшим, але ви можете використовувати будь-який метод масиву.

Якщо ви не знайомі з тим, як працюють такі методи масиву, як map чи reduce, то перегляньте цю статтю, яку я написав.

Далі ми встановлюємо масив checkedState до оновленого масиву updatedCheckedState. Це важливо, тому що якщо ви не оновите стан checkedState в обробнику handleOnChange, ви не зможете встановити або зняти прапорець.

Це пояснюється тим, що ми використовуємо значення checkedState для прапорця, щоб визначити, чи позначено прапорець чи ні (оскільки це контрольований компонент, як показано нижче):

<input
  type="checkbox"
  ...
  checked={checkedState[index]}
  onChange={() => handleOnChange(index)}
/>

Зауважте, що ми створили окрему змінну updatedCheckedState і передаємо цю змінну функції setCheckedState. Ми використовуємо метод reduce для updatedCheckedState, а не для вихідного масиву checkedState.

Причина в тому, що за замовчуванням функція setCheckedState, яка використовується для оновлення стану, є асинхронною.

Виклик функції setCheckedState не гарантує, що ви отримаєте оновлене значення масиву checkedState у наступному рядку.

Тож ми створили окрему змінну та використали її в методі reduce.

Ви можете прочитати цю статтю, якщо ви не знайомі з тим, як стан працює в React.

Потім, щоб обчислити загальну суму, ми використовуємо метод масиву reduce:

const totalPrice = updatedCheckedState.reduce(
  (sum, currentState, index) => {
    if (currentState === true) {
      return sum + toppings[index].price;
    }
    return sum;
  },
  0
);

Метод масиву reduce отримує чотири параметри, з яких ми використовуємо лише три: sum, currentState та index. Ви можете використовувати інші назви, якщо хочете, оскільки це лише параметри.

Ми також передаємо 0 як початкове значення, яке також відоме як значення accumulator для параметру sum.

Потім у функції reduce ми перевіряємо, чи поточне значення масиву checkedState дійсно true.

Якщо значення true, це означає, що прапорець позначено, тому ми додаємо значення відповідного price за допомогою sum + toppings[index].price.

Якщо значення масиву checkedState є false, ми не додаємо його ціну, а просто повертаємо розраховане попереднє значення sum.

Потім ми встановлюємо значення totalPrice до стану total за допомогою setTotal(totalPrice)

Таким чином ми можемо правильно розрахувати загальну суму для обраних топінгів, як ви бачите нижче.

Ось посилання на попередній перегляд наведеного вище прикладу на Code Sandbox, щоб спробувати самостійно.

Дякую, що прочитали!

Більшості розробників важко зрозуміти, як працює Redux. Але кожен розробник React повинен знати, як працювати з Redux, оскільки промислові проєкти здебільшого використовують Redux для керування більшими проєктами.

Тому, щоб вам було легше, я запустив курс Mastering Redux.

У цьому курсі ви вивчите Redux з самого початку, а також створите повноцінний застосунок для замовлення їжі з нуля за допомогою Redux.

Приєднуйтесь до курсу та отримуйте обмежену пропозицію знижки, а також мою популярну книгу «Опанування сучасного JavaScript» безкоштовно.

Хочете бути в курсі регулярного контенту по JavaScript, React, Node.js? Слідкуйте за мною в LinkedIn.

localStorage — це об’єкт вебсховища, який дозволяє сайтам і програмам JavaScript зберігати пари ключ-значення у веббраузері безстроково.

Це означає, що дані зберігаються після оновлення сторінки (sessionStorage) і навіть перезапуску браузера. Це вказує на те, що дані, які зберігаються в браузері, залишаться, навіть якщо вікно браузера закрито.

В загальному, localStorage дозволяє розробникам зберігати дані в браузері та отримувати їх.

Однак важливо розуміти, що використання localStorage як бази даних для вашого проєкту не є хорошою практикою, оскільки дані будуть втрачені, коли користувач, наприклад, очистить кеш.

Розробники часто використовують localStorage для додавання функції нічного режиму до програми, збереження елементу списку справ або збереження введених користувачем значень форми.

У цій публікації ми розглянемо, як використовувати localStorage з хуками React, щоб легко встановлювати та отримувати елементи.

Що таке хуки React?

Хуки React — це функції JavaScript, які ви можете імпортувати з пакету React, щоб додати можливостей своїм компонентам.

Хуки дозволяють React-розробникам використовувати методи стану та життєвого циклу у функціональних компонентах. Вони також працюють з існуючим кодом, завдяки чому їх легко адаптувати до кодової бази.

Щоб використовувати localStorage з React нам знадобляться два хука:

• useState() — хук стану вашого компоненту, який гарантовано зміниться через деякий час. Хук useState() — це функція, яка приймає один параметр, початковий стан (який може бути значенням змінної, об’єкта або будь-якого іншого типу даних у вашому компоненті), і повертає два значення: поточний стан і функцію, яку можна використовувати для оновлення стану.
  
• useEffect() — хук ефекту, активується за замовчуванням після першого відтворення та кожного разу, коли змінюється стан. Як випливає з назви, він використовується для виконання ефекту кожного разу, коли змінюється стан. Цей хук чудово підходить для налаштування слухачів, отримання даних з API та видалення слухачів перед видаленням компоненту з DOM.

Як реалізувати localStorage у React

localStorage надає нам доступ до об’єкту, що зберігає браузер, за допомогою п’яти методів:

• setItem(): цей метод використовується для додавання ключа та значення до localStorage;
• getItem(): цей метод використовується для отримання елемента з localStorage за допомогою ключа;
• removeItem(): ця техніка використовується для видалення елемента з localStorage на основі його ключа;
• clear(): ця техніка використовується для видалення всіх елементів з localStorage;
• key(): коли ви вказуєте номер, це допомагає отримати ключ localStorage.

У цій публікації ми розглянемо лише найпопулярніші методи, а саме перші два.

Як використовувати метод setItem()

Надаючи значення ключу, цей метод використовується для зберігання об’єктів у localStorage. Це значення може мати будь-який тип даних, включно з текстом, цілим числом, об’єктом, масивом тощо.

Важливо пам’ятати, що для того, щоб зберігати дані в localStorage, ви повинні спочатку зв’язати їх за допомогою JSON.stringify() функції.

const [items, setItems] = useState([]);

useEffect(() => {
  localStorage.setItem('items', JSON.stringify(items));
}, [items]);

У наведеному вище коді ми спочатку створили стан і призначили йому порожній масив (у вас може бути будь-який інший тип даних). Потім ми використали useEffect(), щоб додавати об’єкти до localStorage кожного разу, коли змінюється значення нашого стану. Ми зробили це, передавши стан як другий аргумент.

По суті, це основний код, який відповідає за додавання пар ключ-значення до localStorage:

localStorage.setItem('items', JSON.stringify(items));

Простіше кажучи, попередній код називає ключ («items»), а потім призначає йому значення, але спочатку ми повинні були переконатися, що дані, які ми додаємо, є рядком JSON.

Ми використовуємо JSON.stringify() для перетворення об’єкта JSON у текст JSON, збережений у рядку, який потім можна передати на вебсервер.

Як використовувати метод  getItem()

Цей метод отримує об’єкти з localStorage. Існують інші методи, щоб досягти цього за допомогою React, але ми будемо використовувати хук useEffect(), тому що він найкращий.

Хук useEffect() допомагає нам отримати всі елементи під час першого рендерингу, тобто коли компонент встановлюється або повторно рендериться, він отримує всі наші дані з localStorage.

Зауважте, що саме тому ми передали порожній другий аргумент.

const [items, setItems] = useState([]);

useEffect(() => {
  const items = JSON.parse(localStorage.getItem('items'));
  if (items) {
   setItems(items);
  }
}, []);

Важливо пам’ятати, що коли ми зберігали дані, ми спочатку перетворили їх на рядок JSON. Це означає, що для того, щоб ми могли використовувати його, нам потрібно перетворити рядок JSON назад на об’єкт JSON. Ми робимо це за допомогою методу JSON.parse().

Висновок

У цій публікації ми дізналися, як використовувати localStorage з хуками React, коли його використовувати та який хук використовувати.

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

Якщо ви спробуєте реалізувати операції CRUD (тобто чотири базові функції: створення, читання, оновлення та видалення) за допомогою кінцевих точок API, то ви можете виявити, що керувати даними в кількох компонентах дещо важко.

Або, можливо, у вас є модальний компонент, але ви хочете запустити його з іншого компоненту.

Розібратися, як впоратися з цими сценаріями, може бути важко.

У цій публікації я покажу, як ви можете це зробити.

Як передати дані між батьківським та дочірнім компонентом

Спершу давайте передамо дані між батьківським і дочірнім компонентами.

Спочатку вам потрібно буде створити два компоненти, один батьківський і один дочірній.

import React from 'react'

export default function Parent() {
  return (
    <div>
      
    </div>
  )
}

import React from 'react'

export default function Child() {
    return (
        <div>
            
        </div>
    )
}

Далі ви імпортуєте дочірній компонент у батьківський і повертаєте його.

import React from 'react'
import Child from './Child';

export default function Parent() {
  return (
    <div>
      <Child/>
    </div>
  )
}

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

import React from 'react'
import Child from './Child';
import { Button } from 'semantic-ui-react';
import { useState } from 'react';
import './App.css';

export default function Parent() {
  const [data, setData] = useState('');
  
  const parentToChild = () => {
    setData("This is data from Parent Component to the Child Component.");
  }
  return (
    <div className="App">
      <Child/>
      
      <div>
        <Button primary onClick={() => parentToChild()}>Click Parent</Button>
      </div>
    </div>
  )
}

Як ви можете бачити тут, ми викликаємо функцію parentToChild після натискання кнопки Click Parent. Коли натиснуто кнопку Click Parent, у змінній data буде збережено «This is data from Parent Component to the Child Component».

Тепер давайте передамо цей стан даних нашим дочірнім компонентам. Ви можете зробити це за допомогою пропсів.

Передайте дані як пропси, коли викликаєте дочірній компонент, таким чином:

<Child parentToChild={data}/>

Тут ми передаємо дані дочірнього компонента як data.

data — це дані, які ми повинні передати, а parentToChild — це назва пропсу.

Далі настав час записати дані в дочірній компонент. А це дуже просто.

Тут може бути два випадки.

Випадок 1: якщо ви використовуєте функціональний компонент, просто перехопіть parentToChild у параметрах.

import React from 'react'

export default function Child({parentToChild}) {
    return (
        <div>
            {parentToChild}
        </div>
    )
}

Випадок 2: якщо у вас компонент класу, просто використайте this.props.parentToChild.

import React, { Component } from 'react'

export default class Child extends Component {
    render() {
        return (
            <div>
                {this.props.parentToChild}
            </div>
        )
    }
}

У будь-якому випадку ви отримаєте однакові результати:

Коли ми натискаємо на кнопку Click Parent, ми побачимо виведені дані на екрані.

import React from 'react'
import Child from './Child';
import { Button } from 'semantic-ui-react';
import { useState } from 'react';
import './App.css';

export default function Parent() {
  const [data, setData] = useState('');
  
  const parentToChild = () => {
    setData("This is data from Parent Component to the Child Component.");
  }
  return (
    <div className="App">
      <Child parentToChild={data}/>
      
      <div className="child">
        <Button primary onClick={() => parentToChild()}>Click Parent</Button>
      </div>
    </div>
  )
}

Вище ви бачите повний код для Parent Component.

Як передати дані між дочірнім та батьківським компонентом

Це дещо складніше.

Спершу вам потрібно створити функцію в батьківському компоненті під назвою childToParent і порожній стан під назвою data.

const [data, setData] = useState('');

const childToParent = () => {
   
}

Потім передайте функцію childToParent як пропс до дочірнього компонента.

<Child childToParent={childToParent}/>

Тепер у дочірньому компоненті прийміть виклик цієї функції як пропс та призначте його до події onClick.

Крім того, оголосіть стан, який містить деякі дані у вигляді рядка або числа.

Потім передайте дані до функції parentToChild як параметри.

import React from 'react'
import { Button } from 'semantic-ui-react';

export default function Child({childToParent}) {
    const data = "This is data from Child Component to the Parent Component."
    return (
        <div>
            <Button primary onClick={() => childToParent(data)}>Click Child</Button>
        </div>
    )
}

Далі в батьківському компоненті прийміть ці дані у функції childToParent як параметр та налаштуйте дані за допомогою хука useState.

import './App.css';
import { useState } from 'react';
import Child from './Child';

function Parent() {
  const [data, setData] = useState('');
  
  const childToParent = (childdata) => {
    setData(childdata);
  }

  return (
    <div className="App">
      <div>
        <Child/>
      </div>
    </div>
  );
}

export default Parent;

Потім покажіть цю змінну data у функції повернення.

import './App.css';
import { useState } from 'react';
import Child from './Child';

function Parent() {
  const [data, setData] = useState('');
  
  const childToParent = (childdata) => {
    setData(childdata);
  }

  return (
    <div className="App">
     {data}
      <div>
        <Child childToParent={childToParent}/>
      </div>
    </div>
  );
}

export default Parent;

Дочірня змінна data перезапише батьківську, коли кнопку Click Child буде натиснуто.

Тепер ви можете передавати дані від дочірнього компоненту до батьківського і від батьківського до дочірнього як професіонал.

Ви також можете передавати такі події, як onClick або OnChange

Просто викличте метод alert у функції childToParent і передайте цю функцію як пропс дочірньому компоненту.

import './App.css';
import Child from './Child';

function Parent() {
  const childToParent = () => {
    alert("This is an alert from the Child Component")
  }

  return (
    <div className="App">
      <div className="child">
        <Child childToParent={childToParent}/>
      </div>
    </div>
  );
}

export default Parent;

А в дочірньому компоненті прийміть функцію childToParent як пропс. Потім призначте його до події onClick у кнопці.

import React from 'react'
import { Button } from 'semantic-ui-react';

export default function Child({childToParent}) {
    return (
        <div>
            <Button primary onClick={() => childToParent()}>Click Child</Button>
        </div>
    )
}

Ваша функція в батьківському компоненті буде викликана, коли ви натиснете кнопку в дочірньому компоненті, і ви побачите таке сповіщення:

Це все!

Ви можете знайти код на Github, якщо бажаєте експериментувати далі.

Ну ось і все, народе. Щасливого навчання.