# Завдання

Створити багаторазовий компонент `StatusCard`, який відображає різні повідомлення залежно від пропса `online`.

Компонент `StatusCard` має містити:

1. Заголовок (`h2` елемент). Текст заголовка має відображати проп `name`.

2. Абзац (`p` елемент).

* Якщо проп `online` дорівнює `true`, відображати `Online`;
* Інакше відображати `Offline`.

Компонент `App` вже рендерить декілька компонентів `StatusCard` з різними пропсами.


## Початковий код
Відкрийте стартовий проєкт нижче та завершіть відсутні частини компонента.

[Starter code](https://stackblitz.com/github/olreyplay/1dcaf86a-11aa-492e-8e1d-06e055479aa9-challenges/tree/main/challenge-03-starter-show-user-status-messages?file=src%2FApp.jsx)



## Розв'язок

Можна порівняти свій результат із фінальним розв'язком нижче.

[Solution code](https://stackblitz.com/github/olreyplay/1dcaf86a-11aa-492e-8e1d-06e055479aa9-challenges/tree/main/challenge-03-solution-show-user-status-messages?file=src%2FApp.jsx)

Ознайомлення з основами створення користувацьких інтерфейсів за допомогою React. Акцент на компонентах, JSX, потоках даних, стані та побічних ефектах, що використовуються у повсякденних React-застосунках.

Дослідження сутності React та принципів рендерингу інтерфейсів користувача. Акцент на компонентах, синтаксисі JSX та відображенні елементів на екрані.

Яке основне призначення props у React?

Який метод найчастіше використовується для відображення списку елементів у React?

Чому проп key є важливим при відображенні списків?

Занурення у передачу даних між компонентами та керування відображенням інтерфейсу. Основна увага на властивостях, умовному рендерингу та відображенні списків даних.

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

Огляд основних способів стилізації компонентів React. Акцент на застосуванні стилів за допомогою inline-стилів та зовнішнього CSS.

Дізнайтеся, як запускати проєкт React і розуміти його структуру. Основна увага приділяється запуску проєкту за допомогою Vite та навігації файлами проєкту.

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

Завдання

Початковий код

Розв'язок

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

Завдання

Початковий код

Розв'язок