Unable to render icon components in React-CodePudding

I have a list of icons that i want to render out. I am new to react, please help. below is my code

import { GlobeAltIcon, ComputerDesktopIcon } from '@heroicons/react/24/outline'

const icons = [
    {
        id: 1,
        name: GlobeAltIcon
    },
    {
        id: 2,
        name: ComputerDesktopIcon
    },
}
const App = () => {
    return (
        {icons.map((icon)=>(
              <div key={icon.id}>
                {icon.name}
              </div>
         ))}
    )
}

the code returns error whenever i try to render the icon components. Please help me out

CodePudding user response：

Because it's an icon and a JSX, you have to render it like a component, like this:

const App = () => {
    return (
        {icons.map((icon)=>(
              <div key={icon.id}>
                <icon.name />
              </div>
         ))}
    )
}

CodePudding user response：

You can use the icon inside the map like this

<icon.name/>