So here I am trying to map through multiple arrays, and return all the data related to it. But only the first array is getting returned.
The strange thing here is that when I try console logging the same its working just fine. but the moment I put it inside any HTML tag the problem is coming up. What is wrong here? Any kinda help will be very useful.
function getHoveredEventDetails() {
const formattedDay = day.format("DD-MM-YYYY");
const matchingDates = [];
eventsCountandDate.forEach((event) => {
if (event.date === formattedDay) {
matchingDates.push(event);
}
});
let countKey = 1010;
if (matchingDates.length > 0) {
return matchingDates.map((event, index) => {
const coursesDetails = event.courses;
countKey = countKey + 1;
return coursesDetails.map((course, courseIndex) => {
return (
<div className="eventDetails" key={`${index}-${courseIndex}`}>
<div className="profile">
<h1 className="profile_title">{course.courseName}</h1>
<p className="profile_para">
On {course.startProgramDates} till {course.endProgramDates},
From {course.startTime} to {course.endTime}
</p>
</div>
</div>
);
});
});
}
}
Here is the API data, which I am trying to get.
courseCount: 3, courses: (3) [{…}, {…}, {…}], date:"14-02-2024"
Further If I expland the courses array then
courses: Array(3)
1:{courseName: 'Course 1', startProgramDates: '14-02-2024', endProgramDates: '16-02-2024', startTime: '8:00 AM ET', endTime: '13:00 PM ET'}
1:{courseName: 'Course 2', startProgramDates: '12-02-2024', endProgramDates: '16-02-2024', startTime: '11:00 AM ET', endTime: '12:00 AM ET'}
2:{courseName: 'Course 3', startProgramDates: '13-02-2024', endProgramDates: '16-02-2024', startTime: '10:00 PM ET', endTime: '11:00 AM ET'}
2
Answers
You’re returning an array-of-arrays. You’re not telling us what it is you exactly want to return, but given you’ve tagged react.js, presumably a flat list of divs; in that case, use
flatMap
:Your component further simplifies to something like
I think It is weird. Mybe it might works: