Челендж: Умовний Рендеринг Контенту
Завдання: Створення сповіщення в чаті
Розробимо механізм, який показуватиме сповіщення лише тоді, коли користувач має непрочитані повідомлення. Ми перевіримо, чи є у користувача непрочитані повідомлення. Якщо ця умова вірна, ми покажемо повідомлення із зазначенням кількості повідомлень. Однак, ми не покажемо нічого, якщо користувач не має жодного повідомлення.
Завдання полягає в наступному:
- Створити два компоненти:
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.
Дякуємо за ваш відгук!
Запитати АІ
Запитати АІ
Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат
Awesome!
Completion rate improved to 2.17
Челендж: Умовний Рендеринг Контенту
Свайпніть щоб показати меню
Завдання: Створення сповіщення в чаті
Розробимо механізм, який показуватиме сповіщення лише тоді, коли користувач має непрочитані повідомлення. Ми перевіримо, чи є у користувача непрочитані повідомлення. Якщо ця умова вірна, ми покажемо повідомлення із зазначенням кількості повідомлень. Однак, ми не покажемо нічого, якщо користувач не має жодного повідомлення.
Завдання полягає в наступному:
- Створити два компоненти:
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.
Дякуємо за ваш відгук!