How to map list and passing @material-ui/icons in it

I want to pass @material-ui/icons into the MenuList

first I declare a list :

const notifications = [
  {
    id: 0,
    avatarIcon: "<DashboardIcon/>",
    message: "Hey! How is it going?",
    time: "9:32",
  },
  {
    id: 1,
    avatarIcon: "<MenuIcon/>",
    message: "Check out my new Dashboard",
    time: "9:18",
  },
  {
    id: 2,
    avatarIcon: "<WifiIcon/>",
    message: "I want rearrange the appointment",
    time: "9:15",
  },
  {
    id: 3,
    avatarIcon: "<DashboardIcon/>",
    message: "Good news from sale department",
    time: "9:09",
  },
];

in my render I wrote:

{notifications.map(message => (
              <MenuItem key={message.id} className={classes.messageNotification}>
                <div className={classes.messageNotificationSide}>

                  <Avatar className={classes.pinkAvatar}>
                    <DashboardIcon/>          {/* <----- here */}
                  </Avatar>

                  <Typography size="sm" color="secondary">
                    {message.time}
                  </Typography>
                </div>
                ...
              </MenuItem>
            ))}

is there any solution to this problem like {message.avatarIcon} … thanks

Answer

I would change your avatarIcon value like this:

const notifications = [
  {
    id: 0,
    avatarIcon: "DASHBOARD",
    message: "Hey! How is it going?",
    time: "9:32",
  },
  {
    id: 1,
    avatarIcon: "MENU",
    message: "Check out my new Dashboard",
    time: "9:18",
  },
  {
    id: 2,
    avatarIcon: "WIFI",
    message: "I want rearrange the appointment",
    time: "9:15",
  },
  {
    id: 3,
    avatarIcon: "DASHBOARD",
    message: "Good news from sale department",
    time: "9:09",
  },
];

Then create a method that uses a switch case to determine which component to render:

...
getAvataricon(icon) {
  swicth(icon) {
    case 'DASHBOARD':
      return (<DashboardIcon/>);
    case 'WIFI':
      return (<WifiIcon/>);
    case 'MENU':
      return (<MenuIcon/>);
    default:
      return (<WhateverIcon/>);
  }
}
...
{notifications.map(message => (
              <MenuItem key={message.id} className={classes.messageNotification}>
                <div className={classes.messageNotificationSide}>

                  <Avatar className={classes.pinkAvatar}>
                    {getAvatarIcon(message.avatarIcon)}          {/* <----- here */}
                  </Avatar>

                  <Typography size="sm" color="secondary">
                    {message.time}
                  </Typography>
                </div>
                ...
              </MenuItem>
            ))}

P.S. I’m an Angular dev, did some things with React so I don’t know for sure if my JSX completely clean or correct 😉