Зміст курсу
Опановуємо React
Опановуємо React
Челендж: Умовний Рендеринг Контенту
Завдання: Створення сповіщення в чаті
Розробимо механізм, який показуватиме сповіщення лише тоді, коли користувач має непрочитані повідомлення. Ми перевіримо, чи є у користувача непрочитані повідомлення. Якщо ця умова вірна, ми покажемо повідомлення із зазначенням кількості повідомлень. Однак, ми не покажемо нічого, якщо користувач не має жодного повідомлення.
Завдання полягає в наступному:
Створити два компоненти:
App
як батьківський компонент іNotification
як дочірній компонент.Батьківський компонент,
App
, повинен передати дочірньому компоненту проп з назвоюmessages
. Пропmessages
- це масив, що містить повідомлення. У дочірньому компоненті потрібно перевірити довжину масивуmessages
.Якщо у масиві є повідомлення, вивести рядок:
You have <amount> of unread messages.
. При цьому<amount>
слід замінити на фактичну кількість непрочитаних повідомлень.
To determine if there are any messages in the array, we can check its
length
using the length property. The syntax is -array.length
.In React, we use the operator
&&
to implement the logic of anif
statement.To construct the string correctly, replace the placeholder
amount
with the actual length of the array.Use curly braces
{array.length}
to set the array length in the string.
Дякуємо за ваш відгук!