Return statement within .map not rendering

Question

I've got a couple of nested .map functions within a React component which seem to work fine, but for some reason the jsx within the return statement of the final map is not rendering.

Here's the code:

<ul className={`dropdown-menu ${styles.stretch} ${styles.dropdown}`}>
    {
        courseData.courses[0].levels.map(levels => {
            if (levels.id === props.selectedLevel){
                levels.options.map(index => {
                    console.log(index)
                    return (
                        <li key={index.number}>
                            //more content goes here...
                        </li>
                    ) //return
                }) //levels.options.map()
            } //if (...)
        }) //courseData...map()
    }
</ul>

The console.log in the nested .map() works fine and displays the correct data, so everything is fine up until this point, but for some reason the <li> elements inside the return statement are not rendering to the page. I know it's nothing to do with the content of the <li> tags because it won't even render simple elements with simple text nodes.

I'm sure I'm missing something obvious here but tearing my hair out trying to figure it out. Any help would be appreciated!

Incidentally, the list is a bootstrap dropdown button list - not sure if that could be partly responsible.

Answer 1

Your courseData.courses[0].levels.map call returns an array of undefined because there's no return statement in a function you pass as the argument of outer map. You need the return statement, like this:

<ul className={`dropdown-menu ${styles.stretch} ${styles.dropdown}`}>
    {
        courseData.courses[0].levels.map(levels => {
            if (levels.id === props.selectedLevel){
                return levels.options.map(index => { // <- this one
                    console.log(index)
                    return (
                        <li key={index.number}>
                            //more content goes here...
                        </li>
                    ) //return
                }) //levels.options.map()
            } //if (...)
        }) //courseData...map()
    }
</ul>