Челендж: Умовний Рендеринг Контенту

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

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

Завдання полягає в наступному:

• Створити два компоненти: App як батьківський компонент і Notification як дочірній компонент.
• Батьківський компонент, App, повинен передати дочірньому компоненту проп з назвою messages. Проп messages - це масив, що містить повідомлення. У дочірньому компоненті потрібно перевірити довжину масиву messages.
• Якщо у масиві є повідомлення, вивести рядок: You have <amount> of unread messages.. При цьому <amount> слід замінити на фактичну кількість непрочитаних повідомлень.

1. To determine if there are any messages in the array, we can check its length using the length property. The syntax is - array.length.
2. In React, we use the operator && to implement the logic of an if statement.
3. To construct the string correctly, replace the placeholder amount with the actual length of the array.
4. Use curly braces {array.length} to set the array length in the string.