# Cookie Jar: React

## `this`

- When we use an arrow function, the this context is bound to its outer scope
- When we don't use an arrow function and we reference the `onClick` function, this is not bound to our component which is where our state is defined. So when we do `this.addSomething = this.addSomething.bind(this)`, we are binding the function `addSomething` to our component. So, let's break it down:
- `this.addSomething` refers to the `addSomething` method we defined. Since we are doing this in the constructor, it is defined in our App component
- `this.addSomething.bind` - We are referencing the same method but this time calling `bind` on it
- `this.addSomething.bind(this)` - We are passing in the context of App

Example:

let user = {
    firstName: "Jasen",
    // If I were to use an arrow function, it would still return undefined because
    // I can't rebind arrow functions
    greeting: function() { alert('My name is ' + this.firstName) }
}

// We generate a new function that will always run with the given context because we sent it the actual context
user.greeting = user.greeting.bind(user)

// This will return undefined if we don't bind context
childOne.addEventListener(
    "click",
    user.greeting //Call site and context
)