Search code examples
reactjscomponentsrenderheroicons

Unable to render icon components in React

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

Solution

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