What does "this" refer to in a React component?

Question

What does this refer to in the following code:

class Foo extends React.Component {
  constructor() {
    super();
    this.state = {
      bar: "baz",
    }
  }
}

I read YDKJS and, it says that this does not refer to the function itself, but isn't this.state in the code above setting the state of Foo?

check this: [How does the “this” keyword work?](https://stackoverflow.com/questions/3127429/how-does-the-this-keyword-work) — Mayank Shukla, Aug 26 '17 at 03:56
Maybe you should add `console.log(this)` to your constructor function — skyline3000, Aug 26 '17 at 05:44
I mean I was hoping that someone would be able to explain it — Austin Tackaberry, Aug 26 '17 at 05:52

score 0 · Answer 1 · answered Aug 26 '17 at 08:32

With classes you are building a blueprint to eventually create specific instances. constructor contains the code that is being run when a new instance is being created. So this inside a class always (except for static methods) refers to the specific instance that is created.

For example:

class Rectangle {
  constructor(height, width, name) {
    this.height = height;
    this.width = width;
    this.name = name
  }

  calcArea() {
    console.log(this.name)
    return this.height * this.width;
  }
}

const square1 = new Rectangle(10, 10, 'square1');
const square2 = new Rectangle(15, 15, 'square2');

console.log(square1.calcArea()) // square1 100
console.log(square2.calcArea()) // square2 225

As you can see, this refers not just to a generic Rectangle but always to the particular instance you are using. The same goes for React Components.

So to answer your question

this.state = {
    bar: "baz",
}

is not setting the state of Foo. But it's setting the state of the particular instance that gets created with the blueprint (the class) Foo. Because at some point in React's code, it calls new Foo. And only there it will set the state of the instance.

score 0 · Answer 2 · answered Aug 26 '17 at 09:13

"this" is the keyword, which holds reference to something, in this case, this is used within a class naming Foo, so when we use the keyword "this" inside the class it refers to class itself.

By meaning it reference to Foo, means now you can access the other properties and function belonging to class with help of this keyword. Class is like a blueprint, does not exist on its own, we create objects/instances of classes to access them. Once the object/instance is made, and we want to access the properties of class among themselves we use this keyword.

In react object creation is done by below syntax

<Foo />

That when the component is being called. Now in constructor by using the code

this.state = {
      bar: "baz",
    }

we are making sure that we can access bar key across this component from any other function as well. something like below

render(){
    console.log(this.state.bar);
    return (<div>{this.state.bar}</div>)
}

Hope this helps.

score 0 · Answer 3 · answered Aug 26 '17 at 16:19

I don't have enough rep to vote or comment, so I will add my comment here.

@vellip answer is mostly correct, however, the sentence "So this inside a class always (except for static methods) refers to the specific instance that is created." is not totally precise, because in javascript "this" is dependent on the execution context, and not only lexical scope, i.e. being "inside a class". So if a class does event handling for instance, "this" might just as well be a reference to the element that created the event.

score 0 · Answer 4 · answered Aug 26 '17 at 16:50

In the example code you provided, Foo is just the description (or blueprint) for some view, it is not the actual view or instance of the blueprint. React creates the instance of Foo when it has to render it as actual view and it does so whenever it encounters <Foo /> inside your jsx. React internally uses React.createElement method to create instances of its components, so to create an instance of Foo it will do something like this internally:

const fooInstance = React.createElement(Foo)

fooInstance is a plain javascript object if you log it and it is referred by this inside Foo. I hope now you understand that this inside Foo doesn't referes to Foo, rather it refers to instances of Foo which react creates using React.createElement() whenever it encounters ` in you jsx.

What does "this" refer to in a React component?

4 Answers4