javascript - Return statement within .map not rendering - Stack Overflow

admin管理员组

文章数量:1348081

I've got a couple of nested .map functions within a React ponent 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.

I've got a couple of nested .map functions within a React ponent 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.

• javascript
• reactjs
• jsx

Share Improve this question Follow asked Sep 2, 2016 at 14:12 ChrisChris 1,88366 gold badges3030 silver badges4444 bronze badges 2

• Try returning the inner map from the outer map: return levels.options.map – Jeremy Jackson Commented Sep 2, 2016 at 14:14
• 2 the bination of map and if is better written using filter – mb21 Commented Sep 2, 2016 at 14:16

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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>

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

本文标签： javascriptReturn statement within map not renderingStack Overflow