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!
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>
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>
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 Twitter
Just use the a tag like this:
<p>Follow me on Twitter</p>
Related
Below I put a screenshot of some ReactJS code which are buttons that are linked to another part of my website.
I was wondering why this code was not working correctly when I click on it.
<Actions>
<PrimaryButton href="/about" css="">
Start Searching
</PrimaryButton>
<SecondaryButton href="/about">
Learn More
</SecondaryButton>
</Actions>
I tried the above solution and when I clicked the button, it did nothing.
You can use a tag to open an another page. You can use target _blank to open in a new tab or you can use _self to open the same tab.
<a className="your classname" target="_blank" rel="noopener noreferrer" href="/about"
Start Searching
/>
When user click, it does not open nothing and once reload the browser the
anchor open the url social media and all is fine until user navigate to other
page and come back again to Contact page the problem is repeated
export const Contact = () => {
return (
<div className="socialMedia">
<p className="mb-3">VisÃtenos en nuestras Redes Sociales</p>
<ul >
<li>
<a href="https://www.instagram.com/fridartestudio"
target="_blank"
rel="noreferrer"
><i className="bi bi-instagram" id="inst" ></i></a>
</li>
<li>
<a href="https://www.facebook.com/fridarteestudio"
target="_blank"
rel="noreferrer"
><i className="bi bi-facebook" id="faceb" ></i></a>
</li >
</ul>
</div>
)
}
I would like to know how to solve this simple problem with my anchors links social media. thanks by the way
I tried out your code it's actually working fine for me. It's opening the social links and even after I navigate to other page and come back to Contact it still worked fine. How about you re-open your project with npm start
You can also read this out -
https://www.digitalocean.com/community/tutorials/creating-a-social-follow-component-in-react
This feels like the dumbest question I've asked on SO. I can't figure out how to make an img tag clicable in React...
<a className="App-link" href="https://www.google.com" target="_blank" rel="noopener noreferrer">
<img src="facebook_ad.jpg" className="App-ad" alt="facebook ad" />
</a>
Why the above code doesn't work? When I click on the img it just selects it.
Ignore the question... I had my links wrapped in several divs and for some reason this was preventing the links to open. I removed those divs and now the link works.
How to click on one link among several to which all of them having same id.
And it has only one means through which we can get it,that is id.
And through xpath ,we can't do because every time I open the tab,location of that link changes,so xpath changes too.
There are lots of links having same id,it differs through text written above it.so to refer that link,I also mention it through that text,but still not able to do.
In other words,there are links(with images) placed one by one,on execution,I want 3 link to execute but it executes the first one due to having same id's.so what should I do to click the third link not the first one.
<span class="online-signal"></span>
<figure>
<img id="UserImagePreview" src='/Content/PatientPhotos/default.jpg' alt="" />
</figure>
<figcaption class="doc-des-cap" title="Y">Z </figcaption>
<figcaption>Rating: 4</figcaption>
<span class="select-btn">
<a id="linkAppointment" docid="727" docname="x" href="javascript:void(0)">Select</a>
</span>
<span class="offline-signal"></span>
<figure>
<img id="UserImagePreview" src='/Content/PatientPhotos/default.jpg' alt="" />
</figure>
<figcaption class="doc-des-cap" title="C">B</figcaption>
<figcaption>Rating: 0</figcaption>
<span class="select-btn">
<a id="linkAppointment" docid="49" docname="A" href="javascript:void(0)">Select</a>
</span>
Try using the below xpath
//figcaption[contains(#title, 'Y')]/preceding-sibling::figure/img[#id='UserImagePreview']
Replace the title with the <figcaption> title attribute of the respective img you want to locate
Hope this helps you...if it is still not working kindly get back
I want to know how to choose the www.test.com?p=2 with css selector
I use next_page = sel.css(u"div.page_sp > a.pagecl:nth-of-type(2)::attr(href)")
www.test.com?p=2
But it didn't work
Please guide me
Here is the structure looks like:
<div class="page_sp">
<a class="pagecl" href="">prevpage</a>
<a class="page" href="">1</a>
<a class="page" href="">2</a>
....
<a class="page" href="">9</a>
<a class="page" href="">10</a>
<a class="pagecl" href="www.test.com?p=2">nextpage</a>
<span class="page_sp">1/20 </span>
</div>
nth-of-type would not work with a class name, see css3 nth of type restricted to class.
Instead, you may search for a with nextpage text:
>>> response.css("div.page_sp > a:contains('nextpage')::attr(href)").extract()
[u'www.test.com?p=2']
Very poor code!!!
Are you just trying to fetch the next page link?
Use this:
$("a:last-of-type").attr("href");
Although, I must say, there are better ways to do this and you should use other selectors. But well, you didn't give us any contexts so here it is!!!