Functions are not valid as a React Child – When trying to destructure each icon inside a map

I have an array of social media icons that I am mapping through to display each social media item. Each prop socialPlatform which is a string (Facebook, Instagram, LinkedIn) should have its own icon.

Doing it the ugly and not so clean way like checking if socialPlatform equals one of the platforms then return the correct icon. But this can get messy.

I am trying to do the following icon[socialPlatform] the icon is an object of values-based which equals each platform.

Doing this results in: Functions are not valid as a React Child

Am I doing something from?

 <div className="grid place-self-center lg:justify-end">
          <div className="flex col-span-2 space-x-3 text-white lg:col-span-5">
            {socials.length &&
              socials.map((item: any) => {
                const { _key, href, socialPlatform } = item;
                // let icon;

                const icon = {
                  facebook: () => (
                    <div>
                      <FacebookLogo />
                    </div>
                  ),
                  instagram: () => (
                    <div>
                      <InstagramLogo />
                    </div>
                  ),
                  linkedin: () => (
                    <div>
                      <LinkedinLogo />
                    </div>
                  ),
                };

                // socialPlatform === "linkedin" &&
                //   (icon = (
                //     <LinkedinLogo
                //       size={25}
                //       weight="duotone"
                //       color="#FF99F3"
                //     />
                //   ));

                // socialPlatform === "facebook" &&
                //   (icon = (
                //     <FacebookLogo
                //       size={25}
                //       weight="duotone"
                //       color="#FF99F3"
                //     />
                //   ));

                // socialPlatform === "instagram" &&
                //   (icon = (
                //     <InstagramLogo
                //       size={25}
                //       weight="duotone"
                //       color="#FF99F3"
                //     />
                //   ));

                return (
                  <a
                    key={_key}
                    href={href}
                    target="_blank"
                    rel="noreferrer"
                  >
                    <span className="sr-only"> {socialPlatform} </span>

                    {icon[socialPlatform]}
                  </a>
                );
              })}
          </div>
        </div>

>Solution :

You are assigning function component instead of React Nodes, change it to:

const icon = {
  facebook: (
    <div>
      <FacebookLogo />
    </div>
  ),
  // ...
}

return <>{icon[socialPlatform]}</>

Or, without change, you need to actual mount the components:

// If this is the case
const icon = {
  facebook: () => (
    <div>
      <FacebookLogo />
    </div>
  ),
  // ...
}

const IconComponent = icon[socialPlatform];

return <IconComponent/>