Preview URL for dynamically created link

user_7100922 0
Viewed 30

I have a anchor tag. On click of it, I create an anchor tag and set the href attribute.

Something like this:

<a onClick={() => linkClick(url)}> Text </a>


 const linkClick = (url) => {
        const tag= document.createElement('a');
        tag.rel = 'noopener noreferrer';
        tag.target = _blank';
        tag.href = url;
        tag.click();
}

The issue I am facing here is, when I hover over the a tag, the URL preview is not available (Which usually appears at the bottom left) since href attribute is not present. Can you please help me here. (I dont want to add href attribute).

reactjs html javascript
2 Answers

As far as I can tell, you have the dynamic URL when you render the link. Why not just render the component fully with React? If you are going to use React to render your component, I suggest you steer clear of changing the DOM element like that afterwards.

<a 
  href={url}
  rel="noopener noreferrer"
  target="_blank"
>
  Text
</a>
user_9215630

Add the href prop to the anchor tag, and then call preventDefault() in the linkClick` function like so:

<a href={url} onClick={linkClick}> Text </a>

 const linkClick = (e) => {
        e.preventDefault()
        const tag= document.createElement('a');
        tag.rel = 'noopener noreferrer';
        tag.target = '_blank';
        tag.href = e.target.href;
        tag.click();
}
user_28740280
Related