Arrow functions are converted to traditional functions

[ghost]

Hi, I have the following component:

<Button onClick={e => console.log(e)}>Click me</Button>

But it is transformed to this instead:

<Button
  onClick={function onClick(e) {
                return console.log(e);
            }}
>
  Click me
</Button>

This cast is not only visually bad, it also changes the function behavior since an arrow function passes the this value from the context and not function. We might want to use "this" inside the callback function to alter the parent component state.

By the way, this library is very useful ! Thanks 👍

[armandabric]

Hi @mbeaudru-mrkl, thanks for your report

After some research it seems an arrow function could be lost if babel enter in the dance. Are your using it?

inspect-js/is-arrow-function#6

[tomc278]

I am using babel and am getting this issue. What would be the best way around it?

[armandabric]

Expect not using Babel, there nothing you can do to avoid the transformation