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.