Unable to get arrow function to work - material-ui

Question

I am trying to upgrade to es6 for an existing project with Babel. My package.json contains the babel plugins:
"devDependencies": {
"babel-cli": "^6.8.0",
"babel-core": "^6.0.0",
"babel-eslint": "^6.0.4",
"babel-loader": "^6.2.4",
"babel-plugin-transform-runtime": "^6.8.0",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-1": "^6.5.0",
"babel-preset-stage-2": "^6.5.0",
"babel-register": "^6.8.0",
"copy-webpack-plugin": "^2.1.3",
"css-loader": "^0.23.1",
"eslint": "^2.9.0",
"material-ui": "^0.15.0",
"node-sass": "^3.5.3",
"react-hot-loader": "^1.3.0",
"sass-loader": "^3.2.0",
"style-loader": "^0.13.1",
"webpack": "^1.13.0",
"webpack-dev-server": "^1.12.1"
My .babelrc file the following:
{
"presets": ["es2015", "stage-1", "react"],
"plugins": [
"transform-es2015-arrow-functions",
"transform-class-properties"
]
}
And my webpack file contains the following:
```
module: {
loaders: [{
test: /\.js$/,
exclude: /node_modules/,
loaders: ['react-hot', 'babel-loader?presets[]=react,presets[]=es2015,presets[]=stage-2']
},
{
test: /\.scss$/,
loaders: ["style", "css", "sass"]
}
]}
```
And I run my node app with the following command:
cp views/index.html public/index.html && NODE_ENV=development webpack && npm run webpack-dev-server"
I am using a toggle function with material-ui in order to get Drawer component triggered by a hamburger menu in the Appbar component.
The Toggle functions are as follows (as per documentation)
```
handleToggle = () => this.setState({open: !this.state.open});
handleClose = () => this.setState({open: false});
``
However, whenever I run this I get the following error:
Unexpected token (29:16)
27 |
28 |
> 29 | handleToggle () => this.setState({open: !this.state.open});
| ^
30 |
If I change the function from arrow to a more old-school approach I can get it to work i.e.
handleToggle() {
this.setState({open: !this.state.open});
alert("handleToggle clicked");
}
However, I do not want to have to customise every component in material-ui in order to enable it to be backwards compatible. How do I upgrade my code without getting errors?