ES6 arrow function binding and gulp compiling error

Question

I've been trying hard to accomplish code segment below, by reading official ES6 docs and other blogs:

onHomeStoreChange = () => (newState) {
    this.setState(newState);
}

I used this link. but it seems like gulp doesn't do its job correctly, I get A semicolon is required after a class property error but even after putting one this is still undefined. Here is part of gulp file that uses transform.

appBundler
    // transform ES6 and JSX to ES5 with babelify
    .transform("babelify", {presets: ["es2015", "stage-0", "react"]})
        //.transform(babelify.configure({stage: 0}))
    .bundle()
    .on('error',gutil.log)
    .pipe(source('bundle.js'))
    .pipe(gulp.dest(buildDestination));

I use react 0.14.5 and these are my dev dependencies.

"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babel-preset-stage-0": "^6.3.13",
"babelify": "7.2.0",
"browserify": "^12.0.1",
"gulp": "^3.9.0",
"gulp-if": "^2.0.0",
"gulp-streamify": "^1.0.2",
"gulp-uglify": "^1.5.1",
"gulp-util": "^3.0.7",
"vinyl-source-stream": "^1.1.0"

I'm confused and any help would be much appreciated.

edit - adding react complete code

export default class App extends React.Component {
  constructor(props) { //put componentWillMount code in constructor
    super(props);

    //this.bindMethods();
    this.state = HomeStore.getState();
  }

  componentDidMount() {
    HomeStore.listen(this.onHomeStoreChange);
  }

  componentWillUnmount() {
    HomeStore.unListen(this.onHomeStoreChange);
  }

  onHomeStoreChange = (newState) => {
    //I had syntax error here
    this.setState(newState);
  }

  render() {
      return (
        <div>
          components will go here
        </div>
      );
  }

  bindMethods() {
    this.onHomeStoreChange = this.onHomeStoreChange.bind(this);
  }
}

If I use bindMethods() it's working but not =>

use it like this: onHomeStoreChange = (newState) => this.setState(newState); — Raulucco
– Raulucco, Commented Jan 28, 2016 at 11:08
Class properties are ES7! Since there's no standard yet this is an experimental feature. The proposed spec demands a semicolon. — a better oliver
– a better oliver, Commented Jan 28, 2016 at 13:35

N3dst4 · Accepted Answer · 2016-01-28 11:34:18Z

2

You have an extra set of brackets. An arrow function should take its argument in the first set of brackets:

onHomeStoreChange = (newState) => {
    this.setState(newState);
};

The error you're seeing is because you have effectively defined onHomeStoreChange as () => (newState), and then followed it with and extra {...} block.

edited Jan 28, 2016 at 11:34

answered Jan 28, 2016 at 11:15

N3dst4

6,4552 gold badges23 silver badges36 bronze badges

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

5 Comments

Varand Pezeshkian Over a year ago

Hi N3dst4. You hare partially correct, I had syntax error, take a look at this link babeljs.io/blog/2015/06/07/react-on-es6-plus/#arrow-functions but now it's bitching about semicolon, one I put it it's OK. But there are tutorials that dont have semicolon.

Varand Pezeshkian Over a year ago

It's lame to put semicolon if the function is non-native react component method.

N3dst4 Over a year ago

Yeah, you probably don't need the semicolon. You do need to fix the arrow function syntax though ;)

Varand Pezeshkian Over a year ago

Fixed it. Any idea why gulp throws semicolon error now?

N3dst4 Over a year ago

There's an open Babel issue about removing that restriction github.com/feross/standard/issues/372. Seems it was briefly part of the standard (to require semicoons on class properties) and got added to babel.

Collectives™ on Stack Overflow

ES6 arrow function binding and gulp compiling error

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related