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: stackoverflow.com/questions/42063854/… — user2589339
– user2589339, Commented May 12, 2017 at 17:44

Shubham Khatri · Accepted Answer · 2017-05-12 17:12:19Z

1

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.

answered May 12, 2017 at 17:12

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user2589339 Over a year ago

Note quiet, ,but you got me to the right answer: stackoverflow.com/questions/42063854/…. thank you!

Felipe Skinner · Accepted Answer · 2017-05-12 17:24:49Z

1

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

answered May 12, 2017 at 17:24

Felipe Skinner

16.6k2 gold badges27 silver badges31 bronze badges

Collectives™ on Stack Overflow

React overrideing a function with = and => notation Issue

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related