Ability to toggle visible to true or false on Disclosures

[bvsillorequez]

I have a sub-menu that needs to be toggled visible when an item is selected in that sub-menu. Currently when visible is hardcoded to true or false it shows the correct state of the Disclosure.

When I set visible to change between true or false to display what I need to display that submenu if something in that submenu is selected but when set to true like the photo below, the menu doesn't open. Sidenote: Manage is red because it is set in a Disclosure heading and I was checking to see if our logic was correct and would change colors if an item in the menu is selected.

Is there a way to change or modify visible so that when an item in that menu is selected the Disclosure opens up?

[richbachman]

Hi @bvsillorequez

One solution might be to use the useDisclosureState hook and state prop: https://paste.twilio.design/components/disclosure#using-state-hooks

That allows you to tie into the hook happening within the Disclosure. I've set up a very simple example that might help you out here: https://codesandbox.io/s/disclosure-state-ebl15?file=/src/index.tsx

Let us know if that helps.

[bvsillorequez]

@richbachman Thank you. That helped. I was trying to avoid it due to the warning about using state hooks but it solved the problem I had.