如何 map 列出并在其中传递 @material-ui/icons

Question

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 1

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

Answer 2

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

PS I'm an Angular dev, did some things with React so I don't know for sure if my JSX completely clean or correct;)

Answer 3

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 components 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 components.

Answer 4

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

Answer 5

...
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.