Converting Functions to Arrow functions

I'm learning ES6, I just want to convert my ES5 knowledge to ES6.

here's my ES5 code:

function click() {
  this.className += ' grab';
  setTimeout(() => (this.className = 'remove'), 0);
};

and here's my ES6 code:

const click = () => {
  this.className += ' grab';
  setTimeout(() => (this.className = 'remove'), 0);
  console.log('RENDERING');
}

My problem is this.className += ' grab'; and setTimeout(() => (this.className = 'remove'), 0); didn't run the function. But console.log shows on the log.

Is this method don't work on arrow functions?

The reason is that you just need to slightly restructure things.

setTimeout(() => {this.className = 'remove'}, 0)

You have parenthesis vs curly braces.

your this may or may not work depending on how things are structured in the other code

       const click = () => {
           console.log(this);
           this.className += ' grab';
          setTimeout(() => (this.className = 'remove'), 0);
          console.log('RENDERING');
      }
      click();

'this' in the arrow function represents from wherever it is called. for eg if i open the browser and goto console and type above code then 'this' will become window object since the function is called from global enviroment. Also arrow function doesnot have its own 'this'.

You can bind this for arrow function to access functions and data. Your code should be something like

const click = () => {
  this.className += ' grab';
  setTimeout(() => (this.className = 'remove'), 0);
  console.log('RENDERING');
}.bind(this)

It will bind this for arrow function and you can access those variable and functions.