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:

• Use props of the component
• Utilize the Redux approach

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.

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.

Suggested Links

• API Reference of the PanelBar
• API Reference of the PanelBarItem