CODEWITHSUNDEEP
javascriptreactjsjsx
Chris
Chris

Reputation: 1883

Return statement within .map not rendering

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.

Upvotes: 3

Views: 7714

Answers (2)

TimoStaudinger
TimoStaudinger

Reputation: 42460

You are not defining the return value of the outer map:

levels.options.map(index => {

Try adding a return statement:

return levels.options.map(index => {

Upvotes: 4

rishat
rishat

Reputation: 8376

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>

Upvotes: 5

Related Questions