Esta es una pregunta de seguimiento de mi pregunta SO. La respuesta aceptada resolvió mi problema. Sin embargo, terminé con todas las Categories enumeradas en el menú principal. Determiné que era porque estaba anunciando un push en medio de un push .

Código relevante original:

 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>); } }

Traté de arreglar esto dividiendo mi función en dos:

 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>); } }

Esto muestra todas las Categories principales (primer nivel) pero nada debajo de cada SubMenu cuando la categoría tiene hijos. ¿Por qué no puedo devolver subelementos? Cualquier ayuda será apreciada.