React 0.13 class method undefined

Question

So i\'ve started with React and ES6 and got stuck with very basics. Really appreciate some help.

handleClick() throws an error:

Uncaught TypeError: C         


        

Answer 1

react.js:18794 Warning: bind(): You are binding a component method to the component. React does this for you automatically in a high-performance way, so you can safely remove this call. See BlueBall

so just like this:

{
  menuItems.map(
     item => <li className={active ? 'active' : ''} 
  onClick={this.handleClick} key={item.id}>{item.text}</li>
)}

Answer 2

{menuItems.map(function(item) {
  return <li className={active ? 'active' : ''} onClick={this.handleClick.bind(this)} key={item.id}>{item.text}</li>;
})}

Because your code is in strict mode (modules are always in strict mode), this is undefined inside the function you pass to .map.

You either have to explicitly set the context by passing a second argument to .map:

{menuItems.map(function(item) {
  // ...
}, this)}

Or use an arrow function:

{menuItems.map(
     item => <li className={active ? 'active' : ''} onClick={this.handleClick.bind(this)} key={item.id}>{item.text}</li>
)}