'Received `true` for a non-boolean attribute `href`. If you want to write it to the DOM, pass a string instead: href="true" or href={value.toString()}

I have ahref like this. Where on clicking a link, users are redirected to Youtube.


    const handleExternal =()=>{
      window.open("https://youtu.be/rygassaje9LuM", '_blank'); 
  
  }



<li className='leftmenu__menuitem'>
<div>
<span> <a href onClick={handleExternal}>Click here</a> to see how to see Embed Youtube</span>
</div>
</li>

But, I'm getting this error

Received `true` for a non-boolean attribute `href`. If you want to write it to the DOM, pass a string instead: href="true" or href={value.toString()}

Why is this happening?

reactjs

Solution 1:^[1]

The attribute href is supposed to have a value. Passing <a href>text</a> will pass the value of href as true. You have to pass a string to href.

<a href>text</a> is equivalant to <a href={true}>text</a>

For example <a href="https://google.com">text</a>

Or if you want to pass a variable:

const url="https://google.com";
...
...
return (
    <a href={url}>text</a>
)

Solution 2:^[2]

href attribute takes a string value, but you're actually passing a boolean. To understand this behavior check this;

https://reactjs.org/docs/jsx-in-depth.html#props-default-to-true

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	illiteratewriter
Solution 2	konuralpt

'Received `true` for a non-boolean attribute `href`. If you want to write it to the DOM, pass a string instead: href="true" or href={value.toString()}

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]