Trying to generate multiple rows in React is proving to be challenging. An error occurs when attempting to return two rows: "
<tr> can't be a child of <tr>Check out My Current Code Here
I am currently working on creating a basic calendar display that includes the days of the week from Monday to Sunday in the header. My goal is to:
- Have 4-5 rows in the body (one for each week)
- Display the weeks dynamically (rather than just using static numbers) based on data fetched from an API.
The overall layout of the month's calendar should follow this pattern from the first element to the last one (7):
firstWeek[0], firstWeek[1], firstWeek[2], and so on
secondWeek[0], secondWeek[1], and so on
thirdWeek[0], thirdWeek[1], and so on
I've considered implementing a loop to achieve this, but I'm unsure about the best approach. Should I consider other methods? Prior to restructuring my design strategy, I need to address these DOM errors that occur when returning multiple rows.
While I acknowledge this may not be the most optimal code, I'm struggling to find a better solution:
var firstWeek = days[0].map(day=>day.day_number);
var secondWeek = days[1].map(day=>day.day_number);
var thirdWeek = days[2].map(day=>day.day_number);
var fourthWeek = days[3].map(day=>day.day_number);
var fifthWeek = days[4].map(day=>day.day_number);