Type 'IconType' is not assignable to type 'ReactNode'

Question

have been looking for a way to properly render an icon in my component but ended up with an error from the title.

Profile.tsx:

<ul>
  {socialLinks.map((socialLink) => (
    <li key={socialLink.href}>
      <a href={socialLink.href}>{socialLink.icon}</a>
    </li>
  ))}
</ul>

data.ts

import { FaDiscord, FaGithub, FaTwitter } from "react-icons/fa";

export const socialLinks = [
  {
    name: "github",
    href: "#",
    icon: FaGithub,
  },
  {
    name: "twitter",
    href: "#",
    icon: FaTwitter,
  },
  {
    name: "discord",
    href: "#",
    icon: FaDiscord,
  },
];

is there a way to fix this?

Answer 1

The icon is a functional component. You have to invoke it.

Either, invoke it directly in the data config:

{ icon: <FaGithub />, name: ..., href: ... }

or when mapping:

{socialLinks.map((socialLink) => {
   const Icon = socialLink.icon;

   return (
     <li key={socialLink.href}>
       <a href={socialLink.href}>
         <Icon />
       </a>
    </li>
   );
))}