Adding multiple conditions within a Link in React-CodePudding

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`}
>