I am developing a function from an API call which get's the date. To be precise, what I am doing is I am attempting to grab this field, e.g
17/05/2022, which is in my app as:
{new Date(job.created).toLocaleDateString()}
However, what I would like to do is basically take the above and minus 5 days. If the date is greater than that difference, then just tag an h1 saying old
I have the following code working, and logging out my dates correctly:
const fiveDaysAgo = new Date(today - (5*days)).toLocaleDateString()
const datePosted = new Date(job.created).toLocaleDateString()
console.log('five days ago is', fiveDaysAgo)
console.log('date posted was', datePosted)
However I would like to conditionally render, such as -
{ fiveDaysAgo < datePosted
<Typography>
New!
</Typography>
}
Does anyone have ideas?
You may create a function to convert value in a desired way. In this case you transform snake_case to Capitalised Text values.
const days = 1000 * 60 * 60 * 24;
const isOutdated = (date: Date): boolean => {
const nowStamp = new Date().getTime();
const dateStamp = date.getDate();
return nowStamp - dateStamp > 5 * days;
};
Then you are free to use it as any other JS code inside of JSX return:
const Component = ({ createdAt }) => {
return (
<>
{!isOutdated(createdAt) && (
<Typography>
New!
</Typography>
)}
</>
)
}
const fiveDaysAgo = new Date(today - (5*days)).toLocaleDateString()
const datePosted = new Date(job.created).toLocaleDateString()
console.log('five days ago is', fiveDaysAgo)
console.log('date posted was', datePosted)
//then compare timestamp
fiveDaysAgo = fiveDaysAgo.getTime();
datePosted = datePosted.getTime();
{ fiveDaysAgo < datePosted
<Typography>
New!
</Typography>
}