Desafio: Implementar Renderização Condicional na Notificação de Chat

Tarefa: Criando Notificação de Chat

Desenvolver um mecanismo para exibir uma notificação apenas quando o usuário tiver mensagens não lidas. Será necessário verificar se o usuário possui mensagens não lidas. Se essa condição for verdadeira, exibir uma notificação indicando a quantidade de mensagens. Caso contrário, não exibir nada se o usuário não tiver mensagens.

A tarefa é:

• Criar dois componentes: App como componente pai e Notification como componente filho.
• O componente pai, App, deve passar uma prop chamada messages para o componente filho. A prop messages é um array contendo mensagens. No componente filho, é necessário verificar o comprimento do array messages.
• Se houver mensagens no array, exibir a seguinte string: You have <amount> of unread messages. O <amount> deve ser substituído pela quantidade real de mensagens não lidas.

1. Para determinar se há mensagens no array, é possível verificar seu length utilizando a propriedade length. A sintaxe é - array.length.
2. Em React, utiliza-se o operador && para implementar a lógica de uma instrução if.
3. Para construir a string corretamente, substituir o marcador amount pelo valor real do comprimento do array.
4. Utilizar chaves {array.length} para inserir o comprimento do array na string.