2

I have a React project. The project was bootstraped with create-react-app with default configurations. I have defined an arrow function in a class in line 60:

handleClose = () => {
    this.props.history.push('/');
    window.location.reload();
}

But on compilation, an error comes:

enter image description here

Can you please help me solve this issue? Its saying that function itself is not defined at line 60 but we are defining that function at that line only. Note that this is not an issue with the calling of the function. The compiler is giving error for all the arrow functions defined.

Harshit Kedia
  • 104
  • 7
  • Where did you use this function? or can you put your component here? – G_S Feb 24 '18 at 17:06
  • I have use this function by `this.handleClose` only. But even if I remove the use statement, the compilation error is still there. The error is for all the function definitions. @G_S – Harshit Kedia Feb 24 '18 at 17:09
  • 2
    Posting the component definitely helps us. (make sure you saved your component before seeing what the error is. I generally forget saving) – G_S Feb 24 '18 at 17:10
  • Post **code**, not *pictures* of code. Copy and paste errors and such, don't post *pictures* of them. More: http://meta.stackoverflow.com/q/285551/157247 Separately: This isn't nearly enough context; we can't help you with code we cannot see. Please update your question with a [mcve] demonstrating the problem, ideally a **runnable** one using Stack Snippets (the `[<>]` toolbar button). Stack Snippets support React, including JSX; [here's how to do one](http://meta.stackoverflow.com/questions/338537/). – T.J. Crowder Feb 24 '18 at 17:11
  • Add this to your project and you should be good. https://babeljs.io/docs/plugins/transform-class-properties/ – Panther Feb 24 '18 at 17:19
  • 1
    Re the edit: **Again**: We need more context. At the very least, we need to see the code where you're getting this error (the quoted code is not it), but **again**, a [mcve] helps us help you. – T.J. Crowder Feb 24 '18 at 17:34
  • I guess you're trying to do similar to this https://stackoverflow.com/questions/45896230/arrow-vs-classic-method-in-es6-class, and this https://stackoverflow.com/questions/48938883/react-constructor-vs-binding-with-arrow-functions – Jayavel Feb 24 '18 at 17:53

3 Answers3

0

One reason might be the syntax is not by default in javascript.You need to manually transpile by installing stage-0 or stage-3 preset as 

npm install --save-dev babel-preset-stage-0

And then in the .babelrc file set the preset as:

{
  "presets": ["stage-0"]
}

The function syntax you have included is an idea submitted to ECMAScript but not yet standardized.

pritesh
  • 2,162
  • 18
  • 24
0

It may happen because u could have probably forgot to use this.functionName() while calling.

HandleClick = () => ( console.log('clicked'));

This is how You can call that function :-

pankaj
  • 93
  • 1
  • 8
-3

This may be a context issue. You might have to bind it to your class using this.handleClose = this.handleClose.bind(this); in your constructor.

Jordan
  • 148
  • 1
  • 11