Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Вивчайте Завдання: Реалізація Умовного Рендерингу – Сповіщення Чату | Основи React та Компонентно-Орієнтованого Інтерфейсу Користувача
React Mastery

bookЗавдання: Реалізація Умовного Рендерингу – Сповіщення Чату

Завдання: Створення сповіщення про чат

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

Завдання:

  • Створити два компоненти: App як батьківський компонент і Notification як дочірній компонент.
  • Батьківський компонент App має передавати проп messages дочірньому компоненту. Проп messages — це масив, що містить повідомлення. У дочірньому компоненті потрібно перевірити довжину масиву messages.
  • Якщо у масиві є повідомлення, відобразити рядок: You have <amount> of unread messages. Замість <amount> підставити фактичну кількість непрочитаних повідомлень.
  1. Щоб визначити, чи є повідомлення у масиві, можна перевірити його властивість length. Синтаксис — array.length.
  2. У React для реалізації логіки умовного оператора && використовується оператор if.
  3. Щоб правильно сформувати рядок, замініть плейсхолдер amount на фактичну довжину масиву.
  4. Використовуйте фігурні дужки {array.length}, щоб вставити довжину масиву у рядок.

Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 1. Розділ 12

Запитати АІ

expand

Запитати АІ

ChatGPT

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат

Awesome!

Completion rate improved to 2.17

bookЗавдання: Реалізація Умовного Рендерингу – Сповіщення Чату

Свайпніть щоб показати меню

Завдання: Створення сповіщення про чат

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

Завдання:

  • Створити два компоненти: App як батьківський компонент і Notification як дочірній компонент.
  • Батьківський компонент App має передавати проп messages дочірньому компоненту. Проп messages — це масив, що містить повідомлення. У дочірньому компоненті потрібно перевірити довжину масиву messages.
  • Якщо у масиві є повідомлення, відобразити рядок: You have <amount> of unread messages. Замість <amount> підставити фактичну кількість непрочитаних повідомлень.
  1. Щоб визначити, чи є повідомлення у масиві, можна перевірити його властивість length. Синтаксис — array.length.
  2. У React для реалізації логіки умовного оператора && використовується оператор if.
  3. Щоб правильно сформувати рядок, замініть плейсхолдер amount на фактичну довжину масиву.
  4. Використовуйте фігурні дужки {array.length}, щоб вставити довжину масиву у рядок.

Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 1. Розділ 12
some-alt