javascript - Issue with click event in Reactjs -

this going simple. having hard time figuring out wrong how react component written. here component code.

import react, { component, proptypes } 'react'; import styles './menu.css'; import submenu './submenu'; import classnames 'classnames/bind';  let cx = classnames.bind(styles);  export default class menu extends component{ static proptypes ={   menudata:proptypes.array.isrequired };   constructor(props){ super(props);  this.state = {menuopenedlabel:""}; }; menuclick(label){   this.state.menuopenedlabel = label; };  render(){   let menus = this.props.menudata.map(function(menuitem){   let handleclick = this.menuclick.bind(this,menuitem.label);   return (<li key={menuitem.label}>     <a onclick={handleclick}>{menuitem.label}</a>     <submenu submenu={menuitem.submenu} isvisible={this.state.menuopenedlabel === menuitem.label}/>   </li>);   });  return (<nav>   <ul classname={styles.menu}>{(menus)}</ul> </nav>);  } } 

this error in chrome.

 uncaught typeerror: cannot read property 'menuclick' of undefined 

at first thought because of using this inside of map function, apparently code correct. based on link.

https://facebook.github.io/react/tips/expose-component-functions.html

any thoughts?

ok figured out! there second parameter map(), controls value of is.

let menus = this.props.menudata.map(function(menuitem){   let handleclick = this.menuclick.bind(this,menuitem.label);   return (<li key={menuitem.label}>     <a onclick={handleclick}>{menuitem.label}</a>     <submenu submenu={menuitem.submenu} isvisible={this.state.menuopenedlabel === menuitem.label}/>   </li>); }, this);