Challenge: Implement Conditional Rendering – Chat Notification
Task: Creating Chat Notification
Let's devise a mechanism to display a notification only when a user has unread messages. We will verify whether the user has any unread messages. If this condition is true, we will show a notification indicating the number of messages. However, we won't display anything if the user has no messages.
The task is:
- Create two components:
App
as the parent component andNotification
as the child component. - The parent component,
App
, should pass a prop calledmessages
to the child component. Themessages
prop is an array containing messages. In the child component, you need to check the length of themessages
array. - If there are any messages in the array, display a string that says:
You have <amount> of unread messages.
The<amount>
should be replaced with the actual count of unread messages.
Kiitos palautteestasi!