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

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?

CodePudding user response：

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

CodePudding user response：

You should be able to reassign the socialLinks.icon to a new variable and then render it as a React component in the tsx file. I believe the following should work:

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