React ES6 Classes using arrow functions to bind `this`

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) {
  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 :expressionless:

This thread should help:

1 Like

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…

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:

1 Like

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

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.

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.

1 Like

Firstly - thanks for the response.

I am confused… :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?

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.

Yeah, that’s a good one.

Check out this blog post on babel’s site:
"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:
There’s a section titled “ECMAScript 2015 (ES6) classes with class properties”

1 Like


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.

I ended up manually binding every function in the constructor.


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

Not very elegant, but does the job!

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

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"]
1 Like


Thanks, it works!

1 Like

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


class ContactPage extends Page {

    someMethod = (e) => {


will cause a Babel error:

'super' outside of function or class

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