function declaration 'this' scope in React

Question

Why the fetch image button onClick function works in function expression, but not function declaration in the same calling method.

class FetchButtom extends Component {

 async fectchImage() {
    const IMAGE_API = 'Some Image API';
    try {
      const images = await fetch(IMAGE_API);
      const json = await images.json();
      console.log(this);
      this.props.addImage(json.items);
    } catch (error) { }
  }

 fectchImageExpression = async () => {
    const IMAGE_API = 'Some Image API';
    try {
      const images = await fetch(IMAGE_API);
      const json = await images.json();
      console.log(this);
      this.props.addImage(json.items);
    } catch (error) { }
  }

 render() {
    return (
      <div>
        <button 
          // console.log(this); -> this point to FetchButtom
          onClick={() => this.fectchImage()}
          // This will no trigger fectchImage runs
          onClick={() => this.fectchImage}
          // TypeError: Cannot read property 'props' of undefined
          onClick={this.fectchImage}

          // Working perfectly, same as onClick={() => this.fectchImage()}
          onClick={() => this.fectchImageExpression()}
          // This will no trigger fectchImageExpression runs
          onClick={() => this.fectchImageExpression}
          // Working perfectly, same as onClick={() => this.fectchImage()}
          onClick={this.fectchImageExpression}
        >
          Fetch image
        </button>
      </div>
    );
  }
}

So, my question is why function expression have these 2 cases working {() => this.fectchImageExpression()} and {this.fectchImageExpression}, function declaration only working in {() => this.fectchImage()}

With () you are invoking the function

TeaNyan
– TeaNyan

2019-06-02 12:15:25 +00:00
Commented Jun 2, 2019 at 12:15 — TeaNyan
– TeaNyan, Commented Jun 2, 2019 at 12:15

maioman · Accepted Answer · 2019-06-02 12:25:26Z

1

Why it works:
Using the arrow function, an this is true also for property expression,
you're actully binding this lexically (from surrounding declaration context).
Why it don't work:
Differently you'll inherit this from the scope where you call the function, and you'll be missing those methods.

answered Jun 2, 2019 at 12:25

maioman

18.8k4 gold badges39 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

DSCH · Accepted Answer · 2019-06-02 12:28:12Z

0

onClick receives a function declaration - () => this.fectchImage() is an anonymous function which when invoked will run this.fectchImage. When assigning this.fectchImageExpression to onClick then you pass the function without running it, and when clicking it will run the passed this.fectchImageExpression.

When you assign onClick with () => this.fectchImageExpression It's an anonymous function that just has a reference for this.fectchImageExpressionbut without invoking it. So it's seems like it's doing nothing.

answered Jun 2, 2019 at 12:28

DSCH

2,4361 gold badge20 silver badges29 bronze badges

Collectives™ on Stack Overflow

function declaration 'this' scope in React

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related