multilevel dropdown for react recursion

Question

I am building a multilevel menu and want to use recursion to display the menu. Something like the multi-level dropdown from here.

In my code my menu looks like this.

const menu = [
  {
    name: 'Man Utd',
    menu: [
       {
          name: 'Stadium'
       },
       {
          name: 'About'
       }
    ]
  },
  {
    name: 'Liverpool',
    menu: [
       {
           name: 'Contact'
       }
    ]
  }
];

which I then pass this into my react component.

const Dropdown = ({ menu }) => {
    const renderMenu = (items) => {
        return items.map((item: any, index: any) => {
            return (
                <div>
                    {item.menu ? renderMenu() : item.name}
                </div>
            )
        })
    }

    return (renderMenu(menu));
}

the issue here is that it is causing an infinite loop.

Can anyone advise me as to how I can improve this?

Tholle · Accepted Answer · 2019-03-15 10:06:38Z

2

You need to pass item.menu as argument to renderMenu when you recursively render the menu.

Example

const menu = [
  {
    name: "Man Utd",
    menu: [
      {
        name: "Stadium"
      },
      {
        name: "About"
      }
    ]
  },
  {
    name: "Liverpool",
    menu: [
      {
        name: "Contact"
      }
    ]
  }
];

const Dropdown = ({ menu }) => {
  const renderMenu = items => {
    return items.map((item: any, index: any) => {
      return (
        <div style={{ marginLeft: 10 }}>
          {item.name}
          {item.menu ? renderMenu(item.menu) : null}
        </div>
      );
    });
  };

  return <div>{renderMenu(menu)}</div>;
};

ReactDOM.render(<Dropdown menu={menu} />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

answered Mar 15, 2019 at 10:06

Tholle

113k22 gold badges209 silver badges198 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

peter flanagan Over a year ago

this is great, thanks. Any idea of the best way to hide the secondary menu. and only show on hover?

Tholle Over a year ago

@peterflanagan You're welcome! That complicates it a bit, but you might be able to implement that purely in CSS.

peter flanagan Over a year ago

ah, ok, maybe something easier that I can't figure out. How can I make the secondary menus and any menu below display: none? ` - index > 0 doesn't work as it just does the first menu? Any ideas? Thanks again

Tholle Over a year ago

@peterflanagan Please don't change the question after it has been answered. Consider creating a new question entirely if you can't figure it out.

peter flanagan Over a year ago

will do makes sense!

|

Razvan Pop · Accepted Answer · 2019-03-15 10:05:27Z

1

Your not passing down anything to renderMenu. You should call renderMenu(item.menu)

answered Mar 15, 2019 at 10:05

Razvan Pop

1981 silver badge10 bronze badges

Collectives™ on Stack Overflow

multilevel dropdown for react recursion

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related