Custom Properties

To better identify with which element the user interacts, the PanelBar allows you to set any type of properties to the PanelBarItem.

Getting Started

You can set the custom property by passing the property to the PanelBarItem.

class App extends React.Component {
    render() {
        return (
            <PanelBar>
                <PanelBarItem customProp="firstItemCustomProp" />
                <PanelBarItem customProp="secondItemCustomProp" />
            </PanelBar>
        )
    }
}

Accessing Properties

You can access the property from the target of the onSelect PanelBar event.

class App extends React.Component {
    onSelect = (event) => {
        console.log(event.target.props.customProp);
    }
    render() {
        return(
            <PanelBar onSelect={this.onSelect}>
                <PanelBarItem title="First Item" customProp="firstItemCustomProp" />
                <PanelBarItem title="Second Item" customProp="secondItemCustomProp" />
            </PanelBar>
        )
    }
}
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);
 /