¿Cómo puedo usar break para romper una función .map() cuando la representación de la condición es verdadera?
Este es mi código de ejemplo
{messages.length >= 1 ? ( <div> {messages.reverse().map((e) => ( e.senderName[0] == displayName[0] ? (<p>Status: {e.message}</p>) : null ))} </div> ) : (<p>Status: Verifying...</p>)} El problema es que en la matriz de messages se agregará un nuevo mensaje cada 60 segundos y quiero mostrar un nuevo mensaje en mi pantalla que se ha agregado cada 60 segundos.
Luego, quiero romper la función .map() después de que se haya agregado un nuevo mensaje a la matriz de messages y se muestre en mi pantalla
Lo que quiero es así ingrese la descripción de la imagen aquí
Pero el problema es así ingrese la descripción de la imagen aquí
no puede usar break para detener el método .map(). Veo que está intentando mostrar mensajes si el mensaje pertenece al usuario actual.
Puedo recomendarle que filtre los mensajes primero, luego renderice la matriz filtrada con mapeo. Me gusta:
const usersMessages = messages.reverse().filter((e) => (e.senderName[0] === displayName[0]); return ( <div> {usersMessages.length > 0 ? (usersMessages.map(e =>{ return((<p>Status: {e.message}</p>)) })) : <p>Status: Verifying...</p>)} </div> )Por supuesto, debe tener una parte en su código que actualice la matriz de mensajes y active una nueva representación cuando se actualicen los datos.