Desafío: Implementar Renderizado Condicional en la Notificación de Chat
Tarea: Crear notificación de chat
Diseñemos un mecanismo para mostrar una notificación solo cuando un usuario tenga mensajes no leídos. Verificaremos si el usuario tiene mensajes no leídos. Si esta condición es verdadera, mostraremos una notificación indicando la cantidad de mensajes. Sin embargo, no mostraremos nada si el usuario no tiene mensajes.
La tarea es:
- Crear dos componentes:
Appcomo componente padre yNotificationcomo componente hijo. - El componente padre,
App, debe pasar una prop llamadamessagesal componente hijo. La propmessageses un arreglo que contiene mensajes. En el componente hijo, se debe verificar la longitud del arreglomessages. - 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.
- Para determinar si hay mensajes en el arreglo, podemos comprobar su propiedad
length. La sintaxis es -array.length. - En React, utilizamos el operador
&¶ implementar la lógica de una instrucciónif. - Para construir la cadena correctamente, reemplaza el marcador de posición
amountpor la longitud real del arreglo. - Usa llaves
{array.length}para establecer la longitud del arreglo en la cadena.
¡Gracias por tus comentarios!
Pregunte a AI
Pregunte a AI
Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla
Genial!
Completion tasa mejorada a 4
Desafío: Implementar Renderizado Condicional en la Notificación de Chat
Desliza para mostrar el menú
Tarea: Crear notificación de chat
Diseñemos un mecanismo para mostrar una notificación solo cuando un usuario tenga mensajes no leídos. Verificaremos si el usuario tiene mensajes no leídos. Si esta condición es verdadera, mostraremos una notificación indicando la cantidad de mensajes. Sin embargo, no mostraremos nada si el usuario no tiene mensajes.
La tarea es:
- Crear dos componentes:
Appcomo componente padre yNotificationcomo componente hijo. - El componente padre,
App, debe pasar una prop llamadamessagesal componente hijo. La propmessageses un arreglo que contiene mensajes. En el componente hijo, se debe verificar la longitud del arreglomessages. - 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.
- Para determinar si hay mensajes en el arreglo, podemos comprobar su propiedad
length. La sintaxis es -array.length. - En React, utilizamos el operador
&¶ implementar la lógica de una instrucciónif. - Para construir la cadena correctamente, reemplaza el marcador de posición
amountpor la longitud real del arreglo. - Usa llaves
{array.length}para establecer la longitud del arreglo en la cadena.
¡Gracias por tus comentarios!