Return statement within .map not rendering
<p>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.</p>

<p>Here's the code:</p>

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

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

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

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