Tarefa: Criando Notificação de Chat

Vamos criar um mecanismo para exibir uma notificação apenas quando o usuário tiver mensagens não lidas. Será verificado se o usuário possui mensagens não lidas. Se essa condição for verdadeira, será exibida uma notificação indicando a quantidade de mensagens. No entanto, nada será exibido caso o usuário não tenha 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, pode-se verificar seu length utilizando a propriedade length. A sintaxe é - array.length.
2. No React, utiliza-se o operador && para implementar a lógica de uma instrução if.
3. Para construir a string corretamente, substitua o marcador amount pelo valor real do comprimento do array.
4. Use chaves {array.length} para inserir o comprimento do array na string.