I have a Link in React that I need to add some conditions to but I'm not entirely sure how to do it. Below is some code that I am adapting and i need to use this formatting, I unfortunately cannot change the setup to pass some other props instead.
I've added comments to what I am trying to achieve below:
const isPageOne = location?.pathname?.includes('one')
const isPageTwo = location?.pathname?.includes('two')
<Link
href={
!isPageOne
? data.nav_booking?.link_url
: isPageTwo ? `#` // Want to change href to # if isPageTwo - added this but it doesnt seem to work
: `mailto:${data.nav_enquiry?.email}`
}
target={`_blank`}
// Want to add an if isPageTwo then add an onlick=xxx
>
<span>
{!isPageOne && !isPageTwo && data.nav_booking?.link_text}
{isPageOne && data.nav_enquiry?.link_text}
{isPageTwo && data.nav_enquiry?.link_text} // Want to change the link_text to display some other text - no idea where link_text even pulls from
</span>
</Link>
I tried to alter a few things such as adding/changing the below lines but none of it has so far worked.
{isPageTwo && data.nav_enquiry?.`Some Text`}
If anyone could shed some light that would be great!
CodePudding user response:
You can move the conditional operation outside.
let link = `mailto:${data.nav_enquiry?.email}`
if(!pageOne){
link = data.nav_booking?.link_url
} else if(pageTwo){
link = "#"
}
And render it as:
<Link
href={link}
target={`_blank`}
>