La lista de notificaciones proviene del backend. Devuelve un valor booleano y una lista de notificaciones de esta lista. El nombre del valor booleano es 'newNotification'. Si el valor de 'newNotification' es falso, no quiero mostrar la señal de advertencia en el icono.
captura de pantalla de respuesta (sé que es un mal espectáculo)
js
<div className="header__notification"> <AS.Badge color="primary" variant="dot" onClick={handleNotificationClick} className={notificationData.newNotification === false ? 'hidden' : 'header__notification'} > <AS.NotificationsOutlinedIcon className="header__notification_icon" /> </AS.Badge> </div>CSS
.header__notification { .MuiBadge-root { .MuiBadge-badge { background-color: var(--palette-blue-300) !important; top: 8px !important; right: 7px !important; } } .hidden { display: none; } }Traté de llegar a una solución de este tipo. Pero recibo un error como este;
TypeError no capturado: no se pueden leer las propiedades de undefined (leyendo 'newNotification')
¿Cómo puedo hacerlo?
¿Puede cambiar className={notificationData.newNotification === false ? 'hidden' : 'header__notification'} to className={!notificationData?.newNotification ? 'hidden' : 'header__notification'} , intente esto, espero que esto funcione.