onClick / onItemClick JSX Syntax React + Office UI Fabric

Question

          <div>
            <CommandBar 
            areNamesVisible={false} areIconsVisible={true}
            items={[
            { name:"James Towns", className:"noHoverEffect", },
            { key:"Info", icon:"Contact", onItemClick={this.handlePanel} },
            { key:"Export", icon:"Download" }
            ]}       />
          </div>  

I am using the component CommandBar from Office UI Fabric and I've created the contents as desired as shown in the attached image:

What I am trying to achieve next is attach an onClick or onItemClick to one of the Items.

Not sure how this works entirely and the JSX syntax doesn't seem to be straight forward.

My function is handlePanel any help appreciated, looked up and down the web for a few days couldn't find a pre-existing question.

Thanks

Answer 1

Bind you function name in constructor or use arrow function for the same. So bellow example using bind in constructor

1. Firstly bind your function inside constructor as below

   this.handlePanel = this.handlePanel.bind(this);

2. Secondly call function inside component as

   handlePanel(){ // write code here }