javascript - Unable to call function from onClick in React -

i have render within component looks this:

  render() {     if (!this.props.authorities) {       return <div>loading...</div>     }          return (           <div>             <col xsoffset={0.5} md={2}>               <buttongroup col xsoffset={1} md={4} justified centered>                 <dropdownbutton title="authority" id="bg-justified-dropdown">                   {this.props.authorities.map(this.renderauthority)}                 </dropdownbutton>               </buttongroup>             </col>           </div>         )       }     } 

it renders list of dropdown items using renderauthority function, looks this:

  renderauthority(authoritydata) {     return (       <menuitem onclick={this.clickauthority(authoritydata.localauthorityid)} key={authoritydata.localauthorityid} eventkey={authoritydata.localauthorityid}>{authoritydata.name}</menuitem>     )   } 

the onclick within there calls function called clickauthority, looks this:

clickauthority(data) {     this.props.fetchratings(data)   } 

my constructor looks this:

  constructor(props) {     super(props);     this.clickauthority = this.clickauthority.bind(this);   } 

however, error following:

unhandled rejection (typeerror): cannot read property 'clickauthority' of undefined 

this references menuitem onclick. idea i'm doing wrong , how might fix it?

by default, .map() function bind callback global environnement object. binds this.renderauthority function this in constructor too.

constructor(props) {   super(props);   this.renderauthority = this.renderauthority.bind(this);   this.clickauthority = this.clickauthority.bind(this); } 

secondly, when writing that:

onclick={this.clickauthority(authoritydata.localauthorityid)} 

you instantly calling function , giving return onclick property. have make this:

onclick={() => this.clickauthority(authoritydata.localauthorityid)}