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

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

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

Завдання:

• Створити два компоненти: 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}, щоб вставити довжину масиву у рядок.