Vertical menu in react

Question

I need to have a vertical menu like below picture, in react

here is my code:

function DropDownMenu({className}) {
    const [isOpen, setIsopen] = useState(false);

    const toggleDropDown = () => {
        setIsopen(isOpen => !isOpen)
    }

  return (
    <nav className={styles.nav}>
    <ul>
        <li onClick={toggleDropDown} ><a href='#settings'>item1</a>
        {isOpen && <ul>
                <li><a href='#settings'>sub-item1</a></li>
                <li><a href='#settings'>sub-item2</a></li>
                <li><a href='#settings'>sub-item-3</a></li>
            </ul>
        }
            
        </li>
        <li onClick={toggleDropDown} ><a href='#message'>item3</a>
        {isOpen &&
            <ul>
                <li><a href='#settings'>sub-item1</a></li>
                <li><a href='#settings'>sub-item2</a></li>
            </ul>
        }
        </li>
    </ul>
</nav>
  );
}

It lacks hide/show each item separately, and an arrow with some animation when it opens/closes

Answer 1

You should create a separate component called MenuItem and isolate the toggle logic.

const MenuItem = ({ menuTitle, subMenus = [] }) => {
  const [isOpen, setIsopen] = useState(false);

  const toggleDropDown = () => {
    setIsopen((isOpen) => !isOpen);
  };

  return (
    <li onClick={toggleDropDown}>
      <a href="#settings">{menuTitle}</a>
      {isOpen && (
        <ul>
          {subMenus.map((item) => (
            <li>
              <a href="#settings">{item}</a>
            </li>
          ))}
        </ul>
      )}
    </li>
  );
};

Then use MenuItem in DropDownMenu

function DropDownMenu({ className }) {
  return (
    <nav>
      <ul>
        <MenuItem
          menuTitle="item1"
          subMenus={["sub-item1", "sub-item2", "sub-item-3"]}
        />
        <MenuItem menuTitle="item3" subMenus={["sub-item1", "sub-item2"]} />
      </ul>
    </nav>
  );
}

Code sandbox