Understanding "this" in react, example with code

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() {
    this.state = {
      counter: 0
    this.handleIncrement = this.handleIncrement.bind(this)
  handleIncrement() {
      counter: this.state.counter += 1
  render() {
    return (
        <hr />
        <button type="button" onClick={this.handleIncrement}>+</button>

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!

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

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