Desafío: Implementar Renderizado Condicional – 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 se mostrará 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 array que contiene mensajes. En el componente hijo, se debe comprobar la longitud del arraymessages. - Si hay mensajes en el array, 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 array, podemos comprobar su propiedad
lengthusando la sintaxis -array.length. - En React, utilizamos el operador
&¶ implementar la lógica de una sentenciaif. - Para construir la cadena correctamente, reemplazar el marcador de posición
amountcon la longitud real del array. - Usar llaves
{array.length}para establecer la longitud del array 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
Awesome!
Completion rate improved to 2.17
Desafío: Implementar Renderizado Condicional – 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 se mostrará 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 array que contiene mensajes. En el componente hijo, se debe comprobar la longitud del arraymessages. - Si hay mensajes en el array, 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 array, podemos comprobar su propiedad
lengthusando la sintaxis -array.length. - En React, utilizamos el operador
&¶ implementar la lógica de una sentenciaif. - Para construir la cadena correctamente, reemplazar el marcador de posición
amountcon la longitud real del array. - Usar llaves
{array.length}para establecer la longitud del array en la cadena.
¡Gracias por tus comentarios!