How to make a word clickable in text on React JS

Question

I am trying to get people to follow my twitter and discord by clicking on the words "Twitter" or "Discord" in the midst of my text. How would I do that below?

<p className="leading-[1.8] md:leading-[1.8] text-base md:text-xl max-w-[700px] my-9 font-secondary">
    Follow
    us on Twitter or join us in Discord to receive all pertinent news as it happens.{' '}
  </p>

Thanks in advance!

Answer 1

You can try using span when nested. Little extra so that when clicked they open up on separate tabs.

<span> <a href="yourtwitter" target="_blank" 
rel="noreferrer"> @yourTwitter </a> </span>

Answer 2

Try it plz. It works on my side.

//A simple link in Text to redirect an external website

<a className="leading-[1.8] md:leading-[1.8] text-base md:text-xl max-w-[700px] my-9 font-secondary" href="https://stackoverflow.com/questions/73980752/how-to-make-a-word-clickable-in-text-on-react-js/73980765#73980765" target="_blank" rel="noopener noreferrer">
  Follow us on Twitter or join us in Discord to receive all pertinent news as it happens.{' '}
</a>

Answer 3

React uses JSX (or TSX if you're using TypeScript), so you can use any standard HTML tags, including <a/> to link to things.

Follow us on <a href="https://twitter.com/whatever">Twitter</a>

Answer 4

Just use the a tag like this:

<p>Follow me on <a href="yourUrl">Twitter</a></p>