嵌套 map function 什么都不返回

Question

i'm currently developing a Dashboard in React.js with MUI.

I have a list of courses and athletes. Every athlete can have multiple course applied for. For each applied course i want to display a Card with name of the course and the venue.

When i change filter in courseFound to find and return only the first one it works. But when i have a second map function to map the respecting courses, i'll get a blank site.

 {
                        athletes.map((athlete, index) => {
                            if (athlete.courses.length > 0 && courses.length > 0 && venues.length > 0) {
                                const courseFound = courses.filter(course => course.athletes.find(athleteInArray => athleteInArray === athlete.id));
                                courseFound.map((course, index) => {
                                    const venue = venues.find(venue => venue.id === course?.venue);
                                    return (
                                        <div key={index}>
                                            <h3 className={classes.header}>{athlete.firstName + ' ' + athlete.lastName}</h3>
                                            <DashboardGridElement key={index} courseName={course!.name} courseVenue={venue!.venueClubName} courseId={course!.id} />
                                        </div>
                                    );
                                })
                            }
                        })
                    }

Answer 1

The "outer" .map() operation never returns anything. Perhaps you meant to return the result of the "inner" .map() operation:

return courseFound.map((course, index) => {