Controlling the State

The PanelBar allows you to set an initial selection, expansion, or focus state to the PanelBarItem, and override the selection every time a PanelBarItem is selected.

To set the initial state of the PanelBar, you can either:

Using the Props

To set the initial state of the PanelBar, provide a uniquePrivateKey. The uniquePrivateKey option is generated by the component itself and adopts a specific pattern that applies to each PanelBarItem:

  • The generation starts from the first item, which is '.0'. The items from the same level of depth are generated respectively as '.1', '.2', and so on.
  • The children of the first item are respectively '.0.0', '.0.1', '.0.2', and so on.
Example
View Source
Edit In Stackblitz  
Change Theme:

Utilizing the Redux Approach

To control the state of the PanelBar by using Redux:

  1. Keep in your state the uniquePrivateKey from the returned child of onSelect callback.
  2. Pass it as a prop to the PanelBar component.
Example
View Source
Edit In Stackblitz  
Change Theme: