skip to Main Content

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


  1. 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:

    return matchingDates.flatMap((event, index) => {
       ...
    

    Your component further simplifies to something like

    function getHoveredEventDetails() {
      const formattedDay = day.format("DD-MM-YYYY");
      const matchingDates = eventsCountandDate.filter(
        (event) => event.date === formattedDay,
      );
      return matchingDates.flatMap((event, dateIndex) =>
        event.courses.map((course, courseIndex) => (
          <div className="eventDetails" key={`${dateIndex}-${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>
        )),
      );
    }
    
    Login or Signup to reply.
  2. I think It is weird. Mybe it might works:

    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) {
         matchingDates.forEach((event, index) => {
          const coursesDetails = event.courses;
          countKey = countKey + 1;
          coursesDetails.forEach((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>
            );
          });
        });
      }
    }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search