Tarefa: Criando Notificação de Chat

Vamos criar um mecanismo para exibir uma notificação apenas quando um usuário tiver mensagens não lidas. Verificaremos se o usuário possui mensagens não lidas. Se essa condição for verdadeira, exibiremos uma notificação indicando a quantidade de mensagens. No entanto, nada será exibido 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 uma string dizendo: You have <amount> of unread messages. O <amount> deve ser substituído pela contagem real de mensagens não lidas.

1. Para determinar se há mensagens no array, podemos verificar seu length usando a propriedade length. A sintaxe é - array.length.
2. No React, usamos o operador && para implementar a lógica de uma instrução if.
3. Para construir a string corretamente, substitua o marcador amount pelo comprimento real do array.
4. Use chaves {array.length} para definir o comprimento do array na string.