Received `true` for a non-boolean attribute `href`. If you want to write it to the DOM, pass a strin-CodePudding

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?

CodePudding user response：

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

CodePudding user response：

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