I have an ExternalLink
component that I use to render anchor tags for external URLs. I've implemented it using styled-components
.
ExternalLink.tsx
It basically gets an href
prop and render the children as {props.children}
.
const LinkAnchor = styled.a``;
interface ExternalLink_I {
className?: string;
href: string;
}
const ExternalLink: React.FC<ExternalLink_I> = (props) => {
console.log("Rendering ExternalLink...");
return (
<LinkAnchor
className={props.className} // ALLOW STYLING WITH STYLED-COMPONENTS
href={props.href}
target="_blank"
rel="noopener noreferrer"
>
{props.children}
</LinkAnchor>
);
};
But I'm getting an error when rendering this component with children.
App.tsx
export default function App() {
return (
<ExternalLink href={"https://www.google.com"}>
EXTERNAL_LINK
</ExternalLink>
);
}
Here is the error msg in text format:
Type '{ children: string; href: string; }' is not assignable to type 'IntrinsicAttributes & ExternalLink_I'.
Property 'children' does not exist on type 'IntrinsicAttributes & ExternalLink_I'.ts(2322)
QUESTION
What am I doing wrong? How can I get rid of this?