0

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.

Improve this question

2 Answers 2

Reset to default
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>)
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

upvoted this answer, though for readability i would, only place { } <-- within the wrapper div within my return for example if your component needs to return different (whatever), it could become a mess, so what i would normally do i is render () { let whatever1 = this.whatever1(); <-- this function just returns the menuItem.map etc ) let whatever2 = this.whatever2(); return ( <div> {whatever1} {whatever2} </div> ) }
1

You have several problems here:

  1. 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.
  2. You're not returning any components from the render method, you're return an object that contains a function that will generate components.
  3. You're not interpolating JS into the JSX correctly. You have to surround JS expressions with brackets.
  4. 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>
);
Improve this answer

2 Comments

This will do nothing but return an new array containing the unsorted list, but you are not returning it to anything, you forgot to wrap it in curly braces
You're right. Looks like my ninja edit had a mistake. :p

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.