Nested map function returns nothing

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>
                                    );
                                })
                            }
                        })
                    }

Yeah and my further question is, why i can't put the tag with outside the return? If i do so the return doesn't work anymore? I'm thankful for any ideas or help.

return (
        <Root>
            <div className={classes.spacing}>
                <h1 className={classes.header}>{t('general', 'navigation', 'dashboard')}</h1>
                <>
                    {
                        //Future Simon Problem: only one course per person shown in Dashboard grid
                        athletes.map((athlete, index) => {
                            const coursesOfAthlete = courses.filter(course => course.athletes.find(athleteInArray => athleteInArray === athlete.id));
                            <h3 className={classes.header}>{athlete.firstName + ' ' + athlete.lastName}</h3>
                            return coursesOfAthlete.map((course, index) => {
                                const venue = venues.find(venue => venue.id === course?.venue);
                                return (
                                    <div key={index}>
                                        <DashboardGridElement key={index} courseName={course!.name} courseVenue={venue!.venueClubName} courseId={course!.id} />
                                    </div>
                                );
                            })
                        })
                    }
                </>
            </div>
        </Root >
    )

Does anyone has an idea how i get this to work. The thing is, when the is inside the inner map it prints the name every time, but i only wants on name and the the Cards for this name (athlete)

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) => {