Can't use arrow function in ReactJs + Electron : Unexpected token

Question

I used to use arrow function in Javascript in my React Native project and everything worked fine.

Now, I'm working on a ReactJS App with Electron and I can't do any arrow function.

Here is an example :

export default class App extends React.Component {
    
  constructor(props) {
    super(props);
    this.state = {nodes : [],
        path: 'C:/Users/',
    }   
  };

...    

updatePath(event) {  
    this.setState({path: event.target.value});
    this.displayPath(); 
  }

handleNodeClick = (item) => { 
    if (item.type == "folder")
    {
        this.updatePath(item.path + '/');   
    }
  };

...

render() {

return {...}};

This give me an error for the first equal sign :

Uncaught SyntaxError: C:/Users/Alexy/Documents/PROJETS/SOFTLABEL/labelsoft/src/app.jsx: Unexpected token (90:18)
  88 |   
  89 |   
> 90 |   handleNodeClick = (item) => { 
     |                   ^
  91 | 
  92 |  console.log(item);
  93 |  if (item.type == "folder")

I have installed babel with :

npm install --save-dev babel-plugin-transform-class-properties

But in reality, I don't understand what babel is doing here, arrow functions are not JS native ? I never done anything special when I worked on React Native and everything worked like a charm, I'm really really lost here.

Here is my package.json :

{
  "name": "labelsoft",
  "productName": "labelsoft",
  "version": "1.0.0",
  "description": "My Electron application description",
  "main": "src/index.js",
  "scripts": {
    "start": "electron-forge start",
    "package": "electron-forge package",
    "make": "electron-forge make",
    "publish": "electron-forge publish",
    "lint": "eslint --cache --color --ext .jsx,.js src"
  },
  "keywords": [],
  "author": "Alexy",
  "license": "MIT",
  "config": {
    "forge": {
      "make_targets": {
        "win32": [
          "squirrel"
        ],
        "darwin": [
          "zip"
        ],
        "linux": [
          "deb",
          "rpm"
        ]
      },
      "electronPackagerConfig": {
        "packageManager": "npm"
      },
      "electronWinstallerConfig": {
        "name": "labelsoft"
      },
      "electronInstallerDebian": {},
      "electronInstallerRedhat": {},
      "github_repository": {
        "owner": "",
        "name": ""
      },
      "windowsStoreConfig": {
        "packageName": "",
        "name": "labelsoft"
      }
    }
  },
  "dependencies": {
    "@blueprintjs/core": "^3.31.0",
    "electron-compile": "^6.4.4",
    "electron-devtools-installer": "^2.2.4",
    "electron-squirrel-startup": "^1.0.0",
    "fs": "0.0.1-security",
    "path": "^0.12.7",
    "react": "^15.6.2",
    "react-dom": "^15.6.2",
    "react-hot-loader": "^3.1.3",
    "shell": "^0.5.0"
  },
  "devDependencies": {
    "babel-plugin-transform-async-to-generator": "^6.24.1",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-es2015-classes": "^6.24.1",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "electron-forge": "^5.2.4",
    "electron-prebuilt-compile": "8.2.0",
    "eslint": "^3.19.0",
    "eslint-config-airbnb": "^15.1.0",
    "eslint-plugin-import": "^2.22.0",
    "eslint-plugin-jsx-a11y": "^5.1.1",
    "eslint-plugin-react": "^7.20.6"
  }
}

Is there any kind of installation to do to make arrow function work ? There are a lot of information everywhere about how to use it but not how to be able to use it..

Answer 1

Pretty sure you have a problem with closing { }

This is a working demo with some code like yours:

https://codesandbox.io/s/react-counters-w-arrow-functions-forked-c7h9c

Is there any difference between your code an this one? check it and comment.

Answer 2

I believe it should look like:

handleNodeClick(item) {...}

whole example:

export default class App extends React.Component {
    
  constructor(props) {
    super(props);
    this.state = {nodes : [],
        path: 'C:/Users/',
    }   
  };

...    

handleNodeClick(item) { 
    if (item.type == "folder")
    {
        this.updatePath(item.path + '/');   
    }
  };

...

render() {

return {...}};