Mapping through icons with React JS-CodePudding

I need to map icons to my app bar.

It does not show anything. Once I try it the app bar component does not show any icons.

I am not sure how to map through a jsx component inside an array so I can show it in the app bar structure I already have.

-icons.js---------------

import { Download, GitHub, Mail, WhatsApp } from "@mui/icons-material";

export const icons = [
  {
    id: 1,
    ariaLabel: "whatsapp",
    tooltip: "Chat in whatsapp",
    icon: WhatsApp,
  },
  {
    id: 2,
    ariaLabel: "github",
    tooltip: "View github profile",
    icon: GitHub,
  },
  {
    id: 3,
    ariaLabel: "mail",
    tooltip: "Write email",
    icon: Mail,
  },
  {
    id: 4,
    ariaLabel: "curriculum vitae",
    tooltip: "Dowloand CV",
    icon: Download,
  },
];

-Appbar.jsx------------

<Appbar>
  {icons.map((Icon) => (
    <Box key={Icon.id} sx={{ mr: 10 }}>
      <Tooltip title={Icon.tooltip}>
        <IconButton aria-label={Icon.ariaLabel}>
          <Icon />
        </IconButton>
      </Tooltip>
    </Box>
  ))}
</Appbar>;

CodePudding user response：

<Appbar>
{icons.map((Icon) => {
return(
<Box key={Icon.id} sx={{ mr: 10 }}>
<Tooltip title={Icon.tooltip}>
  <IconButton aria-label={Icon.ariaLabel}>
    <Icon />
  </IconButton>
</Tooltip>
</Box>
)})}
</Appbar>;

CodePudding user response：

Code <== The answer would be like

 <div>
  {icons.map((item, index) => (
    <div key={index}>
      {item.tooltip}
      <item.icon />
    </div>
  ))}
</div>