Jekku does Js

events.js

// I'll explain it again


```class MyComponent extends React.Component {
  myEvent = () => {
    console.log('do something')
  }

  render () {
    <button onClick={this.myEvent}> WOW </button>
  }
}```

// This works
// Why? Because you are passing a function as a value. It has not executed yet
```class MyComponent extends React.Component {
  myEvent = () => {
    console.log('do something')
  }

  render () {
    <button onClick={this.myEvent()}> WOW </button>
  }
}```
// THIS does not work preoprly
// Why? Because you invoked the function and passed its return to onClick
// onClick is now `undefined` because there is nothing returned from this.myEvent's invocation
```class MyComponent extends React.Component {
  myEvent = () => {
    return () => console.log('do something')
  }

  render () {
    <button onClick={this.myEvent()}> WOW </button>
  }
}```

// THIS is weird but it will work
// Why? Because myEvent returns a function that has not executed yet. (A thunk)
```class MyComponent extends React.Component {
  myEvent = (params) => {
    return () => console.log(params)
  }

  render () {
    <button onClick={(e) => this.myEvent(e)}> WOW </button>
  }
}```

//This will work. It's a common pattern