React js Mapping Menu & Submenus - foreach

Question

Here is my code:
......
render() {
var menuItems = [
{name: 'Item 1', subMenus: [{name: 'Sub Menu 1-2'}, {name: 'Sub Menu 1-2'}, {name: 'Sub Menu 1-3'}]},
{name: 'Item 2'},
{name: 'Item 3'},
{name: 'Item 4', subMenus: [{name: 'Sub Menu 4-2'}, {name: 'Sub Menu 4-2'}, {name: 'Sub Menu 4-3'}]},
{name: 'Item 5'}
]
var menu = function () {
return (
menuItems.forEach(function (menuItem, i) {
if (menuItem.subMenus != undefined) {
<ul key={i}>menuItem.name
menuItem.subMenus.forEach(function (subMenu, i) {
<li key={i}>subMenu.name</li>
}
</ul>
} else {
// do nothing
}
})
)
}
return({menu})
......
Obviously it is not working.
What would be the correct procedure to loop thru a nested menu?
Thanks in advance.

Answer 1

return (
<div>
{/* GJK forgot to encapsulate mapping in curly braces */}
{menuItems.map(function(menuItem, i) {
if (menuItem.subMenus != undefined) {
return (
<ul key={i}>{menuItem.name}
{menuItem.subMenus.map(function(subMenu, i) {
return <li key={i}>{subMenu.name}</li>;
})}
</ul>
)
} else {
return (
<ul key={i}>{menuItem.name}</ul>
)
}
})};
</div>)

Answer 2

You have several problems here:
You're using a forEach() call instead of a map() call. You're creating ul components but you're not doing anything with them, they're just being thrown away.
You're not returning any components from the render method, you're return an object that contains a function that will generate components.
You're not interpolating JS into the JSX correctly. You have to surround JS expressions with brackets.
After you fix #1, you'll be returning a list of components from render when you can only return a single component. I wrapped everything in a div to fix that issue.
This is what you need:
return (
<div>
{menuItems.map(function(menuItem, i) {
if (menuItem.subMenus != undefined) {
return (
<ul key={i}>
{/* Not sure this is what you meant, but I added it anyway */}
{menuItem.name}
{menuItem.subMenus.map(function(subMenu, i) {
return <li key={i}>{subMenu.name}</li>;
})}
</ul>
);
} else {
return undefined;
}
})}
</div>
);