I've created an anchor tag (not a button) with text that redirects me to another page
<StyledTableCell align="center">
<Link href={`/races/results/${race.id}`}>{race.race_name}</Link>
</StyledTableCell>
There is also a status column indicating the race status.
<StyledTableCell align="center">
{getRaceStatus(race.start_date_time, race.end_date_time)}
</StyledTableCell>
The getRaceStatus function is as follows:
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';
}
};
Now, I want to disable the link when the status is not equal to 'Open'
If anyone could help me with this, I would greatly appreciate it. I've tried on my own but looking for a more concise solution. Thank you!