ReactJs event passed from Container to Presentational Components -

trying wrap head around passing events container presentational components.

as understand attach event presentational/view level component. pass functionality container component presentational component prop. i'm making sure bind function this, getting "cannot read property 'onmouseenterhandler' of undefined" error.

how not passing or binding function?

class featurescontainer extends react.component {     constructor(props) {         super(props);         this.state = {             hovered: false         }         this.onmouseenterhandler = this.onmouseenterhandler.bind(this);     }     onmouseenterhandler() {         this.setstate({             hovered: true         })         console.log('mouse enter, ' + this.state.hovered);     }     render() {         return(             <div classname="page features" >                 <ul classname="features-list">                     {data.features.map(function(obj, i) {                         return (                             <li key={i}>                                 <feature {...obj} onmouseenterhandler={this.onmouseenterhandler} />                             </li>                         )                     })}                 </ul>             </div>         )     } }  class feature extends react.component {     render() {         var bgimg = {              backgroundimage: 'url(' + this.props.img + ')'         };         return (             <div classname="feature-container" onmouseenter={this.props.onmouseenterhandler}>                 <div style={bgimg} classname="feature-img"></div>                 <div classname="feature">                     <h4 classname="feature-issue">issue {this.props.issue}</h4>                     <h1 classname="feature-title">{this.props.title}</h1>                     <h4 classname="feature-copy">{this.props.copy}</h4>                 </div>             </div>         )     } } 

this inside .map callback undefined. that's why error when trying access this.onmouseenterhandler.

either use arrow function:

data.features.map((obj, i) => { ... }) 

or pass this second argument .map:

data.features.map(function(obj, i) { ... }, this)