0
200
VistasHow to pass in MUI icon in a map list
First, I imported the AccountCircle Icon from MUI:
import { AccountCircle } from '@mui/icons-material';
And used styled to style the icon:
const UserIcon = styled(AccountCircle)({
margin: '0px 0px 0px 0px',
});
And my export function looks like this:
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>
</>
);
}
Here is what it looks like when I run it:
I have written dummyNotification as a list of strings, and I map it so that notification is each string in the list. I want to add a user icon (the AcountCircle) in the GreenBox before "Notification __" for each of the 3 boxes. How would I do that here? Thank you in advance.
·
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
If you only want AccountCircle icon then you can hardcode the icon like
<GreenBox><AcccountCircle /> {notification}</GreenBox> or if you want different icons for different notifications then you can do something like this.
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