how to close a dropdown when launching another dropdown

[drclohite]

Navbar includes multiple NavItems, they could include multiple dropdowns - it all works very well thank you. If I have one drop-down great. However, if I have a second drop-down menu it does not close the first when I open a new one which then appears underneath the first drop-down which is not the desired action. So it is both nonfunctional and looks bad.

An answer to this question could help people to work out how to resolve the other issue which could then be resolved with 'react-onclickoutside' maybe

[Jake-Breaks-Stuff]

I had a similar issue with two dropdowns side by side on the navbar.
I'd solved it with the following by modifying the NatItem() function, and adding useRef to the import list.

function NavItem(props) {
    const [open, setOpen] = useState(false);
    const node = useRef();
    //Mounts the mouse handler check
    //If a click outside the dropdown occurs, it closes the dropdown.
    useEffect(() => {
        //add when mounted
        document.addEventListener("mousedown", handleClick);
        return () => {
            document.removeEventListener("mousedown", handleClick);
        };
    }, []);

    const handleClick = (e) => {
        if (node.current.contains(e.target)) {
            //inside element click, returns no change
            return;
        }
        //if clicked outside, forces the drop down to close.
        setOpen(false);
    };

    return (
        <li className="nav-item" ref={node}>
            <a href="#" className="icon-button" onClick={() => setOpen(!open)}>
                {props.icon}
            </a>

            {open && props.children}
        </li>
    );
}

Then within the NavItem() return statement, I added a reference to

Hope this helps!

[ouda21]

@Jake-Breaks-Stuff nicely done buddy. Thank you.