Recursive menu

DEMO
  • Coding
  • Music
  • Art
RecursiveMenu.jsx

function Menu({ items }) {
  const [isSubMenuVisible, setIsSubMenuVisible] 
    = React.useState(new Array(items.length).fill(false));

  const showMenu = (index) => {
    const clone = [...isSubMenuVisible];
    clone[index] = !clone[index];
    setIsSubMenuVisible(clone);
  };

  return (
    <ul>
      {items.map((item, index) => (
        <React.Fragment key={item.title}>
          <li onClick={() => showMenu(index)}>
            {item.title}
          </li>
          {item.subMenu && isSubMenuVisible[index] && (
            <Menu items={item.subMenu} />
          )}
        </React.Fragment>
      ))}
    </ul>
  );
}

export default Menu;

// pass in entries as initial props into Menu
const entries = [
  {
    title: "Coding",
    subMenu: [
      { title: "React", subMenu: [{ title: "Redux" }] },
      { title: "Python", subMenu: [{ title: "Flask" }] },
    ],
  },
  {
    title: "Music",
    subMenu: [
      {
        title: "Strings",
        subMenu: [{ title: "Guitar" }, { title: "Mandolin" }],
      },
      {
        title: "Woodwinds",
        subMenu: [{ title: "Saxophone" }, { title: "Clarinet" }],
      },
    ],
  },
  {
    title: "Art",
    subMenu: [{ title: "Landscape", subMenu: [{ title: "Perspective" }] }],
  },
];

Note: Code snippets do not include styling details unless they are the focus of the exercise.

Copyright © 2022 Explore React