React overrideing a function with = and => notation Issue

Question

I'm trying to override another react repo and am having issues doing so.

Issue 1) I want to override their method

selectItem = (item, clickType, e) => {
...
}

However, project can't compile code with the above syntax which I am trying to override.

Issue 2) What is the difference between the above and using :

selectItem(item, clickType, e){
...
}

If selectItem(item, clickType, e) overrides without using the "=" and "=> notation, I should also be good to go, but it doesn't look like my code is taking (if I setup a "debugger" in an override constructor that is taking so I already know I am instantiating the correct class).

I am under the impression that either way to override the function would be fine.

I was thinking that the Issue #1 involves webpack.config issues. I'm using:

loaders: [
    {
        test: /.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
            presets: ['es2015', 'react']
        }
    },
    { test: /\.css$/, loader: 'style-loader!css-loader' },
]

and the repo I'm looking at is using:

loaders: [
  {
    test: /\.css$/,
    loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
  },
  {
    test: /\.scss$/,
    loader: ExtractTextPlugin.extract('style-loader', 'css-loader!sass-loader')
  },
  {
    test: /\.(js|jsx)$/,
    loaders: ['babel'],
    exclude: /node_modules/
  }
]

They're using ExtractTextPlugin, but shouldn't matter because it's not for .js/.jsx, right?

I don't understand Issue #2 well enough to know where to start.

Credit for Shubham who's response got me to the answer: http://stackoverflow.com/questions/42063854/arrow-function-syntax-not-working-with-webpack — user2589339, May 12 '17 at 17:44

score 1 · Accepted Answer · answered May 12 '17 at 17:12

Thats an arrow function syntax and is part of ES6 extension,

Install the following

npm intall -S babel-preset-state-0 babel-plugin-transform-decorators-legacy babel-plugin-react-html-attrs

and configure your webpack like

loaders: [
    {
        test: /.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
            presets: ['es2015', 'react', 'stage-0'],
            plugins: ['react-html-attrs', 'transform-decorators-legacy']
        }
    },
    { test: /\.css$/, loader: 'style-loader!css-loader' },
]

transform-decorators-legacy plugin will give you support for arrow functions.

Your other repository may have a .babelrc file to go along with the webpack-config.

Note quiet, ,but you got me to the right answer: http://stackoverflow.com/questions/42063854/arrow-function-syntax-not-working-with-webpack. thank you! — user2589339, May 12 '17 at 17:43

score 1 · Answer 2 · answered May 12 '17 at 17:24

I will answer only the notation issue since Shubham already solved the babel one.

The difference between

function foo(bar) {
  console.log(bar)
}

and

const foo = (bar) => console.log(bar)

Is that the first you're defining a named function foo. The second you're defining a foo var that has a function as its value. You could as well do:

var foo = function(bar) { console.log(bar) }

The main difference between arrow function syntax ()=>{} and function(){} is that arrow function does not bind this to its own scope.

For further reading, visit MDN Arrow Function

React overrideing a function with = and => notation Issue

2 Answers2