Beginner : Loop with condition in table reactJS

Question

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 class="text-uppercase">{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?

Jakub Kotrs · Accepted Answer · 2022-03-20 21:25:03Z

2

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.

answered Mar 20, 2022 at 21:25

Jakub Kotrs

6,2841 gold badge16 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Makil Uspn Over a year ago

Thank you very much ! It works, but if i want a new row instead of the comma, how can i do?

Jakub Kotrs Over a year ago

instead of join, you would do eventsMapped[wk].map(event => { ... }) and instead of ... you can have JSX, like wrap it in <p> or something

Collectives™ on Stack Overflow

Beginner : Loop with condition in table reactJS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related