Understanding "this" in react, example with code

1

Hello, am, as many struggling with the “this” keyword. I understand, that it is pointing one level up (like outside a function). Also, that it is pointing to the word, that is to the left of the dot.
But it still is not intuitive for me. Like as in the following example:

import React from 'react'

class Counter extends React.Component {
  constructor() {
    super()
    this.state = {
      counter: 0
    }
    this.handleIncrement = this.handleIncrement.bind(this)
  }
  
  handleIncrement() {
    this.setState({
      counter: this.state.counter += 1
    })
  }
  
  render() {
    return (
      <div>
        <div>{this.state.counter}</div>
        <hr />
        <button type="button" onClick={this.handleIncrement}>+</button>
     </div>
    ) 
  }
}

I would really appreciate, if someone could (like in paint) add some arrows to the “this” keyword and explain to me, where is what pointing to.

Thanks in advance!

2

The JavaScript This Keyword video by Mosh Hamedani on YouTube seems to be well regarded.

The JavaScript Tutorial for Beginners #29 - THIS Keyword video by The Net Ninja on YouTube is also well regarded.

1 Like
3

To understand this particular example you might want to go through Object Oriented Programming section of fcc curriculum: https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/object-oriented-programming/

There is nothing in your example that refers to this as something to have to do with React.

1 Like