This is a follow-up question to my SO question. The accepted answer did resolve my problem. However I wound up with all Categories listed under the main menu. I determined it was because I was calling a push in the middle of a push.

Original relevant code:

function AddMenu(category) {
    if (category.children.length !== 0) {
        categoriesStyled.push(<SubMenu label={category.name}>
        { category.children.forEach(element => AddMenu(element) )}
        </SubMenu>);
    }
    else {
        categoriesStyled.push(<MenuItem>{category.name}</MenuItem>);
    }
}

I tried to fix this by splitting my function into two:

function AddSubMenu(category) {
    if (category.children.length !== 0) {
        return (<SubMenu label={category.name}>
            {category.children.forEach((catchild) => AddSubMenu(catchild))}
            </SubMenu>);
    }
    else {
        return (<MenuItem>{category.name}</MenuItem>);
    }
}

function AddMenu(category) {            
    if (category.children.length !== 0) {                
        categoriesStyled.push(<SubMenu label={category.name}>
            {category.children.forEach((catchild) => AddSubMenu(catchild))}
        </SubMenu>);
    }
    else {
        categoriesStyled.push(<MenuItem>{category.name}</MenuItem>);
    }
}

This shows all the main (First level) Categories but nothing under each SubMenu when the category has children. Why can't I return sub-items? Any help will be appreciated.