### Handling Events
When a class component is created that extends from React.Component, any custom methods created are not bound to the component by default. That is, `this` is not able to reference from within the custom method.
It's important to remember to bind custom methods so that `this` refers to the component.
There are several ways to bind the `this` context in React.
Inside the `render()` method, `this` refers to the component from which `render()` is being called, so common way is to call bind in the render method:
```jsx
render() {
return (
<button onClick={ this.incrementScore.bind(this) }> + </button>
)
}
```
The other common way to bind event handlers is by using an arrow function in the `render` method:
```jsx
render() {
return (
<button onClick={ () => this.incrementScore() }> + </button>
)
}
```
With an arrow function there is no need to bind this because arrow functions use lexical `this` binding, which means that it automatically binds them to the scope in which they are defined.
Inside the render method, `this` refers to the `Counter` component instance.
The arrow function is enclosed inside the render method, so it takes on that same context and the `this` value inside it will properly point to the counter component instance.
### Binding with a component method arrow function
The most common way to bind functions in React is with an arrow function. As stated above, arrow functions are bound to the scope in which they are defined, so if we rewrite the custom method as an arrow function the function gets bound to the component instance:
```jsx
class Counter extends React.Component {
incrementScore = () => {
this.setState({
score: this.state.score + 1
});
}
}
```
The arrow function (`incrementScore`) is enclosed inside the component Class, so the context is the component instance and there is no need to bind it in the `onClick` event:
```jsx
render() {
return (
<button onClick={ this.incrementScore }> + </button>
)
}
```