Why arrow functions can be used on ReactJS classes but not on a pure ES6 class?

Question

I was wondering to know if I can write a pure ES6 class using arrow functions. Here is my class example:

class PhoneNumber {
    constructor(phoneNumber) {
        this.phoneNumber = phoneNumber;
    }

    testEmpty() {
        if (!this.phoneNumber) return true;
        return false;
    }
}

Doen't seem that I can write it as:

class PhoneNumber {
    constructor = phoneNumber => {
        this.phoneNumber = phoneNumber;
    }

    testEmpty = () => {
        if (!this.phoneNumber) return true;
        return false;
    }
}

Altough I can write something similar on React:

   class PhoneNumber extends React.Component {
         state = {
              phoneNumber: this.props.phoneNumber;
         }

         testEmpty = () {
             if (!this.state.phoneNumber) return true;
             return false;
         }
     }

Why React component, even being a class, accepts the ES6 arrow function and my pure class doesn't ?

constructor is not a variable or function name, but a language-specifig keyword. Therefore, you can't "define" it as an arrow function.It should work with testEmpty, though. Also, arrow functions have no own this context. — Sarah Groß
– Sarah Groß, Commented May 5, 2019 at 14:34
The syntax of class members initialized with = is not an ES2015 (ES6) feature. Those are instance fields, and are implemented as if they were this.x = y; initialization statements in the constructor. — Pointy
– Pointy, Commented May 5, 2019 at 14:36
Also, why is it that you want => functions as methods? What would you be able to do if you could use them? — Pointy
– Pointy, Commented May 5, 2019 at 14:37

Никита Гулис · Accepted Answer · 2019-05-05 14:43:42Z

1

Constructor cannot be an arrow function at all. You can create arrow methods in react because react uses proposals for class fields under the hood. You can add them to your project with babel proposal plugins. The benefit of using arrow class methods is that value of this in such a method would refer to class itself inside a callback. So you can use arrow methods inside of an event listener without wrapper function or without bind().

answered May 5, 2019 at 14:43

Никита Гулис

3771 gold badge3 silver badges8 bronze badges

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

Collectives™ on Stack Overflow

Why arrow functions can be used on ReactJS classes but not on a pure ES6 class?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related