Why methods as arrow functions work in react classes but not in normal classes?

Question

We can declare methods of component class as arrow functions, like so:

class SomeComponent extends React.Component {
  someMethod = () => { // <<----- This does not throw error
    // some code
  }
}

..that won't throw any error, but below does:

class SomeNormalClass {
  someMethod = () => { // <<----- This throws error
    // some code
  }
}

It says unexpected = after someMethod. It works fine if I change my someMethod back to normal function instead of declaring it as an arrow function as shown below. Why?

class SomeNormalClass {
  function someMethod() { // <<----- This works fine
    // some code
  }
}

Related https://stackoverflow.com/questions/31362292/how-to-use-arrow-functions-public-class-fields-as-class-methods — Timo, Aug 22 '18 at 12:50
*This works fine* - this is invalid code that will result in syntax error. `function` keyword is out of place. The question lacks https://stackoverflow.com/help/mcve — Estus Flask, Aug 22 '18 at 13:30
It has nothing to do with React but with the build tool you are (or are not) using. — Felix Kling, Aug 22 '18 at 17:33

score 3 · Accepted Answer · answered Aug 22 '18 at 12:52

3

Your someMethod in first example is a property of the class, not a method. BabelJS support properties in classes, but native js not. You can see difference here. You should add some properties in constructor for Vanilla JS.

answered Aug 22 '18 at 12:52

ymd

682
5
18

score 0 · Answer 2 · answered Aug 22 '18 at 13:27

someMethod = () => {...} is class field. Class fields are stage 3 proposal which isn't natively supported and needs to be transformed by transpiler (Babel); someMethod class field is syntactic sugar for constructor code:

constructor() {
  this.someMethod = () => {
    // some code
  }
}

Both SomeComponent and SomeNormalClass are expected to work when used in same conditions. Neither of them will work natively.

Why methods as arrow functions work in react classes but not in normal classes?

2 Answers2