Issue
I am developing a personal website using typescript and react, and for my footer, I am mapping through an array of objects which each have a url property, as well as an icon property. The Icon property is supposed to have multiple different React Icons as the value, so that through each iteration, I can display a different Icon. When I originally implemented this in javascript, my code worked just fine, but after switching my codebase over to typescript, I am presented with this error:
"Parsing error: '>' expected.eslint 'FaGithub' refers to a value, but is being used as a type here. Did you mean 'typeof FaGithub'?ts(2749)"
This is the typescript implementation that I have so far. I have tried removing the angled brackets, and that eliminates the error, but I am unable to actually display the icon when mapping through the array. I would really appreciate any advice.
const socialIcons: { icon: IconType, url: string }[] = [
{
icon: <FaGithub />,
url: "./"
},
{
icon: <FaLinkedin />,
url: "./"
},
{
icon: <FaTwitter />,
url: "./"
},
{
icon: <FaInstagram />,
url: "./"
},
{
icon: <FaFacebook />,
url: "./"
},
]
{socialIcons.map((icons, index) => {
const {icon, url} = icons;
return (
<a href={url} key={index} target="_blank" rel="noopener noreferrer">
{icon}
</a>
);
})}
This is how the socialIcons array originally looked in regular javascript.
const socialIcons = [
{
icon: <FaGithub />,
url: "./"
},
{
icon: <FaLinkedin />,
url: "./"
},
{
icon: <FaTwitter />,
url: "./"
},
{
icon: <FaInstagram />,
url: "./"
},
{
icon: <FaFacebook />,
url: "./"
},
]
Solution
I figured out a solution, all I needed to do was change the file extension from .ts to .tsx, and make the type of the value a JSX.Element to input react components as values within objects without a typescript compiler error.
Answered By - Brady
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.