Things to clear up before jumping into the world of React

this-in-function.md

4. How "this" keyword works with functions JS

To access any variable or any method that is a part of a JavaScript object, we use "this" keyword.

For example,

function Dog(name) {
    if (name) { this.name = name; }
    this.speak = function() {
        return this.name + " says woof";
    }
}

Why does it work this way?

Because, whenever we call a particular function (of an object, for instance, obj.speak()), the value of "this" gets replaced by the object that we have specified (obj in this case).

Or you can think of it this way too: You need to use this.propertyName so as to prevent it from colliding with the global variable (that may or may not exist).

By specifying this.propertyName, you make sure that what you are referring to is a property of the current objects (and not some random variable).