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

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

• javascript
• json
• reactjs

• can't you just make the avatarIcon property a string like 'MENU', 'DASHBOARD' or 'WIFI' and use a switch case to render the ponent you want? – Marnix Harderwijk Commented Nov 5, 2019 at 15:01
• can switch case return html tag? – mushding Commented Nov 5, 2019 at 15:13
• No I mean you just check the avatarIcon which is then MENU || DASHBOARD || WIFI then for each of those cases return (<DashboardIcon/>) if avatarIcon is DASHBOARD etc. – Marnix Harderwijk Commented Nov 5, 2019 at 15:13
• Oh I get it, I don't know switch can be written in render I'll try it – mushding Commented Nov 5, 2019 at 15:18

5 Answers 5

You have to import your icons from the library first then reference it to the object Like

import {
 DashboardIcon
} from "material-ui/icons"

Then Reference it like

const Icons = [
  {
    id: 1,
    name: "Dashboard",
    description:"icon",
    icon: DashboardIcon,
  }]

Now inside your map use an icon like this.

 {Icons.map(list=>(
      <div key={list.id}>
        <list.icon className="w-8 h-8" />       
      </div>  
 ))}

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 ponent 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 pletely clean or correct ;)

...
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",
  },
];...
<List>
    {notifications.map((item, index) => (
        <ListItem button key={item}>
            <ListItemIcon>{item.avatarIcon}</ListItemIcon>
            <ListItemText primary={item.message} />
        </ListItem>
    ))}
</List>

Modify the list with required icons and map the data from the dict as above.

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

 {notifications.map(message => (
 Let Icon = message.avatarIcon;
             return(  <MenuItem key={message.id} 
className={classes.messageNotification}>
                 <div className= 
 {classes.messageNotificationSide}>

                   <Avatar className={classes.pinkAvatar}>
                     <Icon/>          
                   </Avatar>

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

So bit of back story to my answer, In reactjs Jsx is used which allow ponents to be assigned into json objects and be passed. I've personally used this method to dynamically load content from an index.js file story various different ponents.

replace this avatarIcon: "DASHBOARD",with this avatarIcon: (<DashBoardIcon/>) hence by just feeding in the actual icon