How to use href in HTML span when using TSX syntax?

Question

I'm new to using Typescript and React so sorry if this is a novice question. In my code I have the following line:

<p><span href="#" id="nsTool" style={{color:"white", width: "50px"}}> Namespace </span></p>

This originally worked fine when the code was just using Javascript/React but when I converted the file to a .tsx (Typescript), I got the following error:

Type '{ children: string[]; href: string; id: string; style: { color: string; width: string; }; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>'.
  Property 'href' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>'.

Does this mean that I can't use href in the span element? How can I resolve this?

Answer 1

HTML span elements only allow global attributes . So the href attribute won't have an effect on span and therefore you get a Typescript error.

Note: The href attribute is usually only found on an anchor element

Answer 2

<span> tag does not have href attribute. You can append span tag with anchor tag like this way:

<span>
    :&nbsp; 
    <a href="#">
        Namespace
    </a>
</span>