Beginner : Loop with condition in table reactJS-CodePudding

I'm trying to make a "weekly planning" in reactJS, i'm a beginner, so sorry if you see any mistakes.

I have an array of events, like this :

  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"
}];

I created a condition to see if the event date is the same of the week date and i put this in a table like this :

        <table className="table table-bordered text-center">
      <thead>
        <tr className="bg-light-gray">
          {week.map((wk) => (<th >{wk}</th>))}
        </tr>
      </thead>
      <tbody>
        <tr>
          {week.map((wk) => (
              events.map((ev) =>(
                wk === ev.date ?
                <td>{ev.name}</td>
                :
                <td></td>
              ))
          ))}
        </tr>
      </tbody>
    </table>

But it doesn't work because it creates too much of "td" elements, and i don't know how to put the event name below the correct date...

Can someone help me there?

CodePudding user response：

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.