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

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

javascriptcssreactjs


Solution 1:[1]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 cSharp

Related Questions