React ES6 Classes using arrow functions to bind `this`

[cstrat]

I don’t know enough about the inner workings of things to properly understand why this isn’t working.

I am trying to use the proper class formatting for setting up my components.
Now this means using the constructor to bind this to my functions within that component.
This is a little frustrating to do over and over again…
eg. having to do this for every function where I want to use this…

constructor(props) {
  super(props);
  this.tick = this.tick.bind(this);
}

The react docs have a section on this: react component - no autobinding. It says that you can use arrow functions to auto bind.

I think that this means setting up your functions within the class like this:

tick = () => {
  ...
}

However this throws a weird error which isn’t making sense to me…

Error: Missing class properties transform

---

Does anyone know how to make this work?
Am I doing something wrong?
I’ve searched online and people seem to point to Babel configs and other things I have no clue about

[hwillson]

This thread should help:

No more need for method pre-binding, looks like!

Since ES2015 classes do not auto-bind their methods to the class the same way React.createClass does, it’s been suggested that people pre-bind their methods in the constructor: class Thing extends React.Component { constructor(props) { super(props); this.func1 = this.func1.bind(this); this.func2 = this.func2.bind(this); } func1(event) {} func2() {} } It seems that Meteor now supports class properties, so you can now simply do this: class Thing extends React.Comp…

[cstrat]

Thanks for linking me there!
I had a look and the discussion is exactly what I am after - however I think that I am doing everything right code wise.

@warmbowski @ffxsam ITT you guys mention some Babel setup required? I haven’t added Babel or anything… is that why it isn’t working for me? Do I just: meteor npm install babel-plugin-transform-class-properties and add that .babelrc?

Why do I need to do this, the React docs seem to make it sound like it is standard ES6 code…

[psilotec]

Not sure how you’re binding on your second example but you might find this article useful if not only to clear things up a little further:

React & Autobinding – Komenco Blog – Medium

[cstrat]

Maybe I just need to try it again… maybe I missed something because I was tired
I was doing exactly everything that medium article said to do for Best Solution: ES2015 Arrow Functions.

[warmbowski]

Class properties are not part of ES6. They’re still a stage 2 proposal. So they could change still. I’ve always assume this is why it’s a separate plugin. https://github.com/tc39/proposal-class-public-fields

It seems that babel plugins should be supported, as of 1.3.3. You might look at this issue thread for any clues on getting it to work. I don’t know if anything has been updated around babel plugins in 1.4.

[cstrat]

Firstly - thanks for the response.

I am confused… What are class properties?
I am trying to do exactly what the author of the article @psilotec posted is doing. There is no mentioned of class properties. I am just trying to use the arrow functions to auto-bind? Does that use class properties in the background?

[cstrat]

oh I’m understanding more now… found this article: egorsmirnov…

using the arrow notation means I am using class properties. instead of defining functions, I am setting properties within the class to be my functions.

[warmbowski]

Yeah, that’s a good one.

Check out this blog post on babel’s site: https://babeljs.io/blog/2015/06/07/react-on-es6-plus
"Class Properties" seem to encompass the two sections marked Property Initializers and Arrow Functions. Basically things that you would usually include in the constructor.

Also, this is a good one too: http://reactkungfu.com/2015/07/what-react-component-class-syntax-should-i-use/
There’s a section titled “ECMAScript 2015 (ES6) classes with class properties”

[xareelee]

@cstrat

Have you resolved this issue now? I encounter the same problem as you did.

I have no idea how to set up my Meteor project to support arrow functions in the ES6 classes for auto-binding.

[cstrat]

I ended up manually binding every function in the constructor.

So:

this.functionxxx = this.functionxxx.bind(this);

Not very elegant, but does the job!

[a.com]

This is what I do. The bleeding edge hipster may scoff at you, but otherwise its not the end of the world, imo.

[ddddave]

I think you need the babel plugin:

meteor npm install babel-plugin-transform-class-properties

and add a .babelrc file to your project root with this in it:

{
  "plugins": ["transform-class-properties"]
}

[xareelee]

@ddddave

Thanks, it works!

[XTA]

I have to say that using this syntax will cause a problem if you extend a class:

F.e.

class ContactPage extends Page {

    someMethod = (e) => {
      super.someMethod(e);
    }


}

will cause a Babel error:

'super' outside of function or class

[rimskys]

I am adding this answer to this old discussion in case some are still looking for answers. In order to be able to use class properties you need to:
meteor npm install --save-dev babel-preset-stage-2

and then add a preset to your .babelrc file (add .babelrc file in the root directory of your project) :
{
“presets”: [ “stage-2”]
}

Credits to ffxsam