2018-10-12 15:37:13 -04:00
---
title: Bind 'this' to a Class Method
---
2019-07-24 00:59:27 -07:00
# Bind 'this' to a Class Method
2018-10-12 15:37:13 -04:00
2019-07-24 00:59:27 -07:00
---
## Problem Explanation
2018-10-12 15:37:13 -04:00
If a method on JavaScript `class` need to access some internal `state` of the instance, like `this.state` , the method need to be bound to the instance of the `class` . A more detailed description of 'this' binding can be found [here ](https://github.com/getify/You-Dont-Know-JS/blob/master/this%20%26%20object%20prototypes/ch2.md )
2019-07-24 00:59:27 -07:00
---
## Hints
2018-10-12 15:37:13 -04:00
### Hint 1
Like many things in programming, there is more than one way to bind this. For this challenge we are going to stick with constructor binding.
```js
class MyClass {
constructor() {
this.myMethod = this.myMethod.bind(this);
}
2019-07-24 00:59:27 -07:00
2018-10-12 15:37:13 -04:00
myMethod() {
// whatever myMethod does
}
}
```
2019-07-24 00:59:27 -07:00
---
## Solutions
< details > < summary > Solution 1 (Click to Show/Hide)< / summary >
2018-10-12 15:37:13 -04:00
```jsx
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
itemCount: 0
};
// change code below this line
this.addItem = this.addItem.bind(this);
// change code above this line
}
addItem() {
this.setState({
itemCount: this.state.itemCount + 1
});
}
render() {
return (
< div >
{ /* change code below this line */ }
< button onClick = {this.addItem} > Click Me< / button >
{ /* change code above this line */ }
< h1 > Current Item Count: {this.state.itemCount}< / h1 >
< / div >
);
}
}
```
2019-07-24 00:59:27 -07:00
< / details >