How to pass in MUI icon in a map list-CodePudding

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.

CodePudding user response：


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>
    </>
  );
}

CodePudding user response：

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>
    </>
  );
}