Is there a way to dynamically expand/collapse a PanelBar and/or PanelBarItems utilizing a prop?

    export default function Vehicles(props) {
    <PanelBar
      style={props.style}
      expanded={props.expanded}
    >
... several PanelBarItems
</PanelBar>
} 

This is more or less my PanelBar.

What I want to do it make a simple "navigation" bar the will list all the "contents" of the PanelBar(the titles of the PanelBarItems). It should expand the PanelBarItem(s) that were clicked which I cannot seem to make happen. I have a function that grabs the corresponding key to whichever item is supposed to be expanded based on the navigation and adds it the expanded array.

I've tried passing in an array of keys, like they show in the docs, but that only works on the initial render. If I pass in expanded=[".0",".0.0"], it will do what I expect and expand the PanelBar and the first child. If I pass in expanded=[], and then add ".0" and ".0.0", the sections do not expand.

CodePudding user response：

Yes, You can do it. Item is expanded when prop expanded={true}.
So pass to Vehicles component props in this shape

const expanded = {
  item1: true,
  item2: false,
  // etc.
}

Then use

`expanded={pros.expanded.item1}`

CodePudding user response：

There is an open issue about this exact issue. There is no controlled mode for the PanelBar. The only way to "dynamically open" and close them is to update the key and force a remount. I just used key={props.expanded.toString()} to force the component to update.