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