CODEWITHSUNDEEP
javascriptreactjsonclickjsxonitemclick
MikeXero
MikeXero

Reputation: 63

onClick / onItemClick JSX Syntax React + Office UI Fabric

          <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:

enter image description here

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

Upvotes: 1

Views: 845

Answers (1)

Himanshu Pandey
Himanshu Pandey

Reputation: 708

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 }

Upvotes: 1

Related Questions