SVG component : Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object

I have a function that return an SVG depending on the string received as argument.

In my craftjs app using Nextjs, when I use it I have error :

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of `SocialMedia`.

I don’t understand my error.

Here is the code :

import DailyMotionIcon from "@public/assets/socialMediaIcons/dailymotion.svg";
import FacebookIcon from "@public/assets/socialMediaIcons/facebook.svg";
import InstagramIcon from "@public/assets/socialMediaIcons/instagram.svg";
import LinkedInIcon from "@public/assets/socialMediaIcons/linkedin.svg";
import TikTokIcon from "@public/assets/socialMediaIcons/tiktok.svg";
import TwitterIcon from "@public/assets/socialMediaIcons/twitter.svg";
import YoutubeIcon from "@public/assets/socialMediaIcons/youtube.svg";

export const socialMediaIcon = (network: string) => {
  switch (network) {
    case "facebookUrl":
      return <FacebookIcon />;
    case "instagramUrl":
      return <InstagramIcon />;
    case "linkedinUrl":
      return <LinkedInIcon />;
    case "tiktokUrl":
      return <TikTokIcon />;
    case "twitterUrl":
      return <TwitterIcon />;
    case "youtubeUrl":
      return <YoutubeIcon />;
    case "dailymotionUrl":
      return <DailyMotionIcon />;

    default:
      return null;
  }
};
// in the JSX
{Object.entries(socialMedia.socialLinks).map(([network]) => ( // here network === "facebookUrl"
        <div key={network}>
          {socialMedia.conf[network].showIcon && <div>{socialMediaIcon(network)}</div>}
        </div>
))}

Leave a Comment