Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprende Desafío: Implementar Renderizado Condicional en la Notificación de Chat | Componentes Reutilizables y Flujo de Datos
Introducción a React

bookDesafí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: 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 verificar 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, podemos comprobar su propiedad length. La sintaxis es - array.length.
  2. En React, utilizamos el operador && para implementar la lógica de una instrucción if.
  3. Para construir la cadena correctamente, reemplaza el marcador de posición amount por la longitud real del arreglo.
  4. Usa llaves {array.length} para establecer la longitud del arreglo en la cadena.

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 2. Capítulo 4

Pregunte a AI

expand

Pregunte a AI

ChatGPT

Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla

bookDesafí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: 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 verificar 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, podemos comprobar su propiedad length. La sintaxis es - array.length.
  2. En React, utilizamos el operador && para implementar la lógica de una instrucción if.
  3. Para construir la cadena correctamente, reemplaza el marcador de posición amount por la longitud real del arreglo.
  4. Usa llaves {array.length} para establecer la longitud del arreglo en la cadena.

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 2. Capítulo 4
some-alt