0
201
VistasCómo pasar el icono MUI en una lista de mapas
Primero, importé el ícono AccountCircle de MUI:
import { AccountCircle } from '@mui/icons-material';Y usé estilo para darle estilo al ícono:
const UserIcon = styled(AccountCircle)({ margin: '0px 0px 0px 0px', });Y mi función de exportación se ve así:
export default function Notifications() { const dummyNotification = [ 'Notification #1', 'Notification #2', 'Notification #3', ]; const cardComponents = dummyNotification !== undefined ? dummyNotification.map((notification) => ( <div key={notification}> <div> <GreenBox>{notification}</GreenBox> </div> </div> )) : 'Loading...'; return ( <> <NavBar /> <Row> <RightCol> <div>{cardComponents}</div> </RightCol> </Row> </> ); } Esto es lo que parece cuando lo ejecuto: 
He escrito dummyNotification como una lista de cadenas, y lo mapeo para que la notificación sea cada cadena en la lista. Quiero agregar un ícono de usuario (AcountCircle) en GreenBox antes de "Notificación __" para cada uno de los 3 cuadros. ¿Cómo haría eso aquí? Gracias de antemano.
·
Juan Pablo Isaza
2 Respuestas
Responde la pregunta0
function Notifications() { const dummyNotification = [ {notif: 'Notification #1', icon: UserIcon }, {notif: 'Notification #2', icon: UserIcon }, {notif: 'Notification #3', icon: UserIcon }, ]; const cardComponents = dummyNotification !== undefined ? dummyNotification.map((notification) => ( <div key={notification.notif}> <div> <GreenBox> <notification.UserIcon/ > {notification.notif} </GreenBox> </div> </div> )) : 'Loading...'; return ( <> <NavBar /> <Row> <RightCol> <div>{cardComponents}</div> </RightCol> </Row> </> ); }
·
Juan Pablo Isaza
Denunciar
0
Si solo desea el ícono AccountCircle, puede codificar el ícono como <GreenBox><AcccountCircle /> {notification}</GreenBox> o si desea diferentes íconos para diferentes notificaciones, puede hacer algo como esto.
export default function ControlledSwitches() { const UserIcon = styled(AccountCircle)({ margin: "0px 0px 0px 0px" }); const dummyNotification = [ { text: "Notification #1", icon: <UserIcon /> }, { text: "Notification #2", icon: <UserIcon /> }, { text: "Notification #3", icon: <UserIcon /> } ]; const cardComponents = dummyNotification !== undefined ? dummyNotification.map((notification) => ( <div key={notification}> <div> <GreenBox> {notification.icon} {notification.text} </GreenBox> </div> </div> )) : "Loading..."; return ( <> <NavBar /> <Row> <RightCol> <div>{cardComponents}</div> </RightCol> </Row> </> ); }
·
Juan Pablo Isaza
Denunciar
Responde la pregunta