ReactJS: Close automatically the menu when change page

Question

I have a create a nested menu, but I have a problem with it.

I have :

Parent_Menu
  Parent1
      > Child_Menu1
      > Child_Menu2
  Parent2

Now if I click for example in Child_Menu1, i'm redirect to the page correctly and also the Parent1 menu is closed, but the Parent_Menu reamins opened (So i can click another time or in parent1 or in parent2).

I would to close all the menu (the parent_menu) when I change page.

import React, { useState } from 'react';
import MenuItem from 'app/shared/layout/menus/menu-item';
import { Dropdown, DropdownToggle, DropdownMenu, UncontrolledDropdown, DropdownItem, NavLink } from 'reactstrap';
import { NavDropdown } from './menu-components';

    export const EntitiesMenu = props => {
      const [dropDownOpen, setDropDownOpen] = useState(false);
      const toggle = () => setDropDownOpen(prevState => !prevState);
    
      return (
        <NavDropdown
          icon="th-list"
          name="Parent_Menu"
          id="parent-menu"
          data-cy="parent_menu"
          style={{ maxHeight: '80vh', minWidth: '150px', minHeight: '250px' }}
        >
          <Dropdown isOpen={dropDownOpen} toggle={toggle} direction="right">
            <DropdownToggle nav caret style={{ color: '#000000', marginLeft: 25 }}>
              Parent1
            </DropdownToggle>
            <DropdownMenu right style={{ border: '0px', outline: 'none', marginTop: 20 }}>
              <DropdownItem>
                <MenuItem icon="asterisk" to="/child_menu1">
                  Child_Menu1
                </MenuItem>
              </DropdownItem>
              <DropdownItem>
                <MenuItem icon="asterisk" to="/child_menu2">
                  Child_Menu2
                </MenuItem>
              </DropdownItem>
            </DropdownMenu>
            <NavLink href="/parent2" style={{ color: '#000000', marginLeft: 25 }}>
              Parent2
            </NavLink>
          </Dropdown>
        </NavDropdown>
      );
    };

How can I do to close automatically all the menu?

Answer 1

have you try the onBlur? or you can even use the onClick

import React, { useState } from 'react';
import MenuItem from 'app/shared/layout/menus/menu-item';
import { Dropdown, DropdownToggle, DropdownMenu, UncontrolledDropdown, DropdownItem, NavLink } from 'reactstrap';
import { NavDropdown } from './menu-components';

    export const EntitiesMenu = props => {
      const [dropDownOpen, setDropDownOpen] = useState(false);
      const toggle = () => setDropDownOpen(prevState => !prevState);
    
      return (
        <NavDropdown
          icon="th-list"
          name="Parent_Menu"
          id="parent-menu"
          data-cy="parent_menu"
          style={{ maxHeight: '80vh', minWidth: '150px', minHeight: '250px' }}
        >
          <Dropdown isOpen={dropDownOpen} toggle={toggle} direction="right">
            <DropdownToggle nav caret style={{ color: '#000000', marginLeft: 25 }}>
              Parent1
            </DropdownToggle>
            <DropdownMenu onBlur={e=>{
toggle()
}} right style={{ border: '0px', outline: 'none', marginTop: 20 }}>
              <DropdownItem>
                <MenuItem onClick={()=>{
toggle()
}}  icon="asterisk" to="/child_menu1">
                  Child_Menu1
                </MenuItem>
              </DropdownItem>
              <DropdownItem>
                <MenuItem onClick={()=>{
toggle()
}} icon="asterisk" to="/child_menu2">
                  Child_Menu2
                </MenuItem>
              </DropdownItem>
            </DropdownMenu>
            <NavLink onClick={()=>{
toggle()
}}  href="/parent2" style={{ color: '#000000', marginLeft: 25 }}>
              Parent2
            </NavLink>
          </Dropdown>
        </NavDropdown>
      );
    };