In React with Redux how to make double colons work - reactjs

Question

I am trying to use ES2017 in my React project with webpack
I have a .babelrc file, and a package.json.
this is my .babelrc file:
{
"presets": ["es2017"]
}
and this is package.json:
{
"name": "myapp",
"version": "1.0.0",
"private": true,
"devDependencies": {
"babel-core": "^6.22.1",
"babel-loader": "^6.2.10",
"babel-plugin-syntax-async-functions": "^6.13.0",
"babel-plugin-syntax-trailing-function-commas": "^6.22.0",
"babel-plugin-transform-async-to-generator": "^6.22.0",
"babel-preset-es2017": "^6.22.0",
"enzyme": "^2.4.1",
"react-addons-test-utils": "^15.3.0",
"react-scripts": "^0.4.0",
"webpack": "^2.2.1"
},
"dependencies": {
"css-loader": "^0.26.1",
"react": "^15.3.0",
"react-bootstrap": "^0.30.7",
"react-dom": "^15.3.0",
"react-redux": "^4.4.5",
"react-router": "^3.0.0",
"react-router-redux": "^4.0.7",
"redux": "^3.5.2",
"redux-logger": "^2.6.1",
"redux-thunk": "^2.1.0",
"style-loader": "^0.13.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"eject": "react-scripts eject",
"test": "react-scripts test"
},
"eslintConfig": {
"extends": "./node_modules/react-scripts/config/eslint.js"
}
}
When I am trying to use double colon, console reports syntax error
<div onMouseEnter={::this.mouseEnter()}>
</div>
anything wrong?

Answer 1

In order to make use of the :: operator to bind the function, you need to use the babel-plugin-transform-function-bind plugin.
Install it using the below command
npm install --save-dev babel-plugin-transform-function-bind
and then in your .babelrc include it as
{
"presets": ["react", "stage-0", "es2015"],
"plugins": ["transform-function-bind"]
}
Make sure you install the above using
npm install -S babel-preset-stage-0 babel-preset-2015 babel-preset-react
:: is the ES2015+ function bind syntax and not ES2017
Read more about it here :

Answer 2

Not an answer per se, but you can achieve similar behavior by declaring class methods as lambdas (or any other method mentioned here) :
export class MyComponent extends React.Component {
mouseEnter = () => {
console.log('hover');
}
render() {
return <h1 onMouseEnter={this.mouseEnter}>hi!</h1>
}
}