CODEWITHSUNDEEP
javascriptreactjs
RaxPat
RaxPat

Reputation: 311

function declaration 'this' scope in React

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()}

Upvotes: 0

Views: 63

Answers (2)

DSCH
DSCH

Reputation: 2366

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.

Upvotes: 0

maioman
maioman

Reputation: 18734

  • 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.

Upvotes: 1

Related Questions