In JSX I am mapping through a number of days that I have calculated in a month:
{range(daysInMonth).map((i) => (
<div
className="day-cell day-cell--in-month"
key={i}
>
{i + 1}
</div>
))}
I then have a array of events coming from an api:
const events = [
{
date: timestamp,
description: "Meeting with friends"
}
//More events//
]
How can I map through the array of events and match the event timestamp to the current timestamp of the date for the daysInMonth that is being mapped and then display the event description?
In case the above comment's assumption ...
"the daysInMonth is just a number, for example for Feb it would be 28." ... thus, one can assume the timestamp/date value of an events item is an integer as well?
... applies, one could implement the preceding filter task in collaboration with some.
const events = [{
date: timestamp,
description: "Meeting with friends"
}/*, { More events }*/];
{
range(
daysInMonth
).filter(dayValue =>
events.some(({ date }) => date === dayValue)
).map(dayValue => (
<div
className="day-cell day-cell--in-month"
key={dayValue}
>
{dayValue + 1}
</div>
))
}
Edit
"... thus, one can assume the timestamp/date value of an
eventsitem is an integer as well?" – Peter Seliger"... it's a timestamp from a MySQL database." – adherb
"... then within the already provided filter code of my answer one has to get the
dayfrom eacheventsitem'sdatevalue in order to make it comparable to the integer value of eachdaysInMonthitem." – Peter Seliger
const events = [{
date: timestamp,
description: "Meeting with friends"
}/*, { More events }*/];
{
range(
daysInMonth
).filter(dayValue =>
events.some(({ date }) =>
new Date(date).getDay() === dayValue
)
).map(dayValue => (
<div
className="day-cell day-cell--in-month"
key={dayValue}
>
{dayValue + 1}
</div>
))
}