Desafío: Implementar Renderizado Condicional en la Notificación de Chat

Tarea: Crear notificación de chat

Diseñar un mecanismo para mostrar una notificación solo cuando un usuario tenga mensajes no leídos. Se verificará si el usuario tiene mensajes no leídos. Si esta condición es verdadera, se mostrará una notificación indicando la cantidad de mensajes. Sin embargo, no se mostrará nada si el usuario no tiene mensajes.

La tarea es:

• Crear dos componentes: App como componente padre y Notification como componente hijo.
• El componente padre, App, debe pasar una prop llamada messages al componente hijo. La prop messages es un arreglo que contiene mensajes. En el componente hijo, se debe comprobar la longitud del arreglo messages.
• Si hay mensajes en el arreglo, mostrar una cadena que diga: You have <amount> of unread messages. El <amount> debe ser reemplazado por el número real de mensajes no leídos.

1. Para determinar si hay mensajes en el arreglo, se puede comprobar su propiedad length usando la sintaxis - array.length.
2. En React, se utiliza el operador && para implementar la lógica de una sentencia if.
3. Para construir la cadena correctamente, reemplazar el marcador de posición amount con la longitud real del arreglo.
4. Usar llaves {array.length} para establecer la longitud del arreglo en la cadena.