React: Use ES6 arrow functions in Classes TO avoid binding your methods with the current This object


Working with React sometimes, if you like well-organized and structured code, you will be in the situation to have to do things like:

this.minus = this.minus.bind(this);

Using arrow functions

We can avoid having to bind every method by using ES6 arrow functions inside of the class methods. That means that we need to use the babel plugin called “transform-class-properties” explicitly because by now (dec 2016) it is an experimental feature in babel.


Read more about arrow functions

Arrow function example. More info about arrow functions.

How to configure ti use with Babel

If you previously had a project using React with ES6, these are the three changes you should do to achieve it:

  • Add “transform-class-properties” to .babelrc file.
  • Change the class method by an arrow function in component class.
  • Install the babel plugin “babel-plugin-transform-class-properties” using npm i –save-dev babel-plugin-transform-class-properties. (likely in the near future will be included as a babel ootb feature)

Code sample

Take a look to this github commit to see the changes in detail:


Author: José Quinto
Copyright Notice: All articles in this blog are licensed under CC BY-SA 4.0 unless stating additionally.