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.
class App extends React.Component {
    items = [
            {
                id: 1, title: '.0', children: [
                    {
                        id: 2, title: '.0.0'
                    },
                    {
                        id: 3, title: '.0.1'
                    },
                    {
                        id: 4, title: '.0.2'
                    }
                ]
            },
            {
                id: 5, title: '.1', children: [
                    {
                        id: 6, title: '.1.0',
                    },
                    {
                        id: 7, title: '.1.1', children: [
                            {
                                id: 8, title: '.1.1.0'
                            },
                            {
                                id: 9, title: '.1.1.1'
                            },
                            {
                                id: 10, title: '.1.1.2'
                            },
                            {
                                id: 11, title: '.1.1.3'
                            }
                        ]
                    },
                    {
                        id: 12, title: '.1.2'
                    }
                ]
            },
            {
                id: 13, title: '.2', disabled: true
            }
    ]
    render() {
        let components = PanelBarUtils.mapItemsToComponents(this.items);
        return(
            <PanelBar expanded={['.1','.1.1']} selected={'.0'} focused={'.1.1.3'} children={components}/>
        )
    }
}
ReactDOM.render(
    <App/>,
    document.querySelector('my-app')
)

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.
import * as React from 'react';
import * as ReactDOM from 'react-dom';

import { createStore, combineReducers } from 'redux';
import { Provider } from 'react-redux';

import * as reducers from './reducers.js';
import initialState from './initialstate.js';
import { PanelBarDataContainer } from './PanelBarDataContainer.jsx';

const rootReducer = combineReducers({
    selected: reducers.selected,
    items: reducers.items
});

let store = createStore(rootReducer);

ReactDOM.render(
    <Provider store={store}>
        <PanelBarDataContainer />
    </Provider>,
    document.querySelector('my-app')
);
 /