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);

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.


Picture: Arrow function example. More info about arrow functions.

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)


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


Hope that it helps!


Leave a Reply

Your email address will not be published.

Time limit is exhausted. Please reload CAPTCHA.

Post Navigation