score:1

Accepted answer

consider what a table looks like when you need to render it. first, you need to "make rows" and then inside each row, you need to "make columns". since you're only doing one week, it pretty much gives you the first task for free, there is only one row.

as for the second part, rendering columns, you need to prepare your data better. organize the events by the day of when they are happening. i will take this as a simple task with events only being on one specific date as you posted, if you wanted events to span multiple days, the code would obviously be different.

first, imaging what is the desired output:

var events = {
  [date]: [eventname, eventname, eventname],
  [date]: [eventname],
  [date]: [],
}

this shows a structure were a day can hero zero, one or more events happening. it's also possible to use undefined instead of [] for the "zero" case. this allows you to easily render:

{week.map((wk) => (
  <td key={wk}>
     {events[wk] ? events[wk].join(', ') : null}
  </td>
)}

now, what this does is that when rending a day of the week, it prints a list of events into that cell, if there are any. this is simplified for sure, but it shows what to do.

finally, you need to modify your data to match the final data:

var events = [
  {
    date: moment("14-03-2022", "dd-mm-yyyy").format("ddd d mmm yyyy"),
    name: "event monday 13 2022"
  },
  {
    date: moment("16-03-2022", "dd-mm-yyyy").format("ddd d mmm yyyy"),
    name: "event wednesday 2022"
  }
];

var eventsmapped = {}
var event
for (event of events) {
  if (!eventsmapped[event.date]) {
    eventsmapped[event.date] = []
  }
  eventsmapped[event.date].push(event.name)
}

you can simply do this inside the render function. for small arrays, it should be fine. if you get a lot of events, you can consider optimizing it later.

then you can use eventsmapped to render where it was events above.


Related Query

More Query from same tag