Can I disable an anchor tag with respect to an if condition which return a string-CodePudding

I have made an anchor tag (not a button) text to redirect me to another page

<StyledTableCell align="center">
   <Link href={`/races/results/${race.id}`}>{race.race_name}</Link>
</StyledTableCell>

And I do have a status column that indicates the race status.

<StyledTableCell align="center">                                        
   {getRaceStatus(race.start_date_time, race.end_date_time)}
</StyledTableCell>

My getRaceStatus is,

export const getRaceStatus = (start_date, end_date) => {
const now = new Date();
const startX = new Date(start_date);
const endX = new Date(end_date);
if (startX.getTime() > now.getTime()) {
    return 'Coming Soon';
}
if (startX.getTime() <= now.getTime() && now.getTime() < endX.getTime()) {
    return 'Open';
} else {
    return 'Finished';
}

};

So, I wanted to disable my link when the status is not equal to 'open'

Can someone please help me out with this? I have tried to get it done but I wanted something short and easy way to get the requirement done. Thank you

CodePudding user response：

Would only placing a <Link> when the status is Open, otherwise just a span be ok to implement?

<StyledTableCell align="center">
   {getRaceStatus === 'Open' ? 
        <Link href={`/races/results/${race.id}`}>{race.race_name}</Link> :
        <span>{race.race_name}</span>
   }
</StyledTableCell>

If not, you could follow this post's answer and disable the link by changing the onClick function depending on the status.