How do I add Wikipedia style references in my ReactJS application?

October 17, 2022

I want to create superscript tags, which if clicked upon, redirect the user to the references, like in Wikipedia.

Now, I created the superscript tag and tried setting href attribute to it, but nothing happens when I click, even though the inspect element shows that the href attribute has been properly applied to sup tag.

This is what I tried:

useEffect(() => {
    let sup = document.querySelectorAll("sup");

    if(sup && sup.length > 0 ) {

    sup[0].setAttribute("href", 'https://www.google.com');
    console.log(sup, "sup")
    
    }
  }, [articles])

>Solution :

sup element doesn’t have href attribute, and can’t navigate too.

You need to inject inside an anchor tag with href of the link you need to navigate to.

let sup = document.querySelectorAll("sup");

if (sup && sup.length > 0) {
  sup[0].innerHTML = `<a href="https://www.google.com">${sup[0].innerHTML}</a>`
}