Issue

This Content is from Stack Overflow. Question asked by Karol

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

Solution

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

This Question was asked in StackOverflow by Karol and Answered by Samir MRch It is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.