How to resolve this error with the Materialui Drawer component

Question

I am trying to use the Drawer of the ui material, but is returning the following error when Gulp will process it:

Unexpected token (15:17) handleToggle = () => this.setState({open: ! this.state.open})

The error points to the "=" after "hanbleToggle"

The code is as follows::

import React from 'React'; import Drawer from 'material-ui/Drawer'; import Menuitem from 'material-ui/Menuitem'; import Raisedbutton from 'material-ui/Raisedbutton';

export default class Drawersimpleexample extends React.Component {

constructor(props) {

    super(props);
    this.state = {open: false};

}

handleToggle = () => this.setState({open: !this.state.open});

render() {
    return (
        <div>
            <RaisedButton
                label="Toggle Drawer"
                onTouchTap={this.handleToggle}
            />
            <Drawer open={this.state.open}>
                <MenuItem>Menu Item</MenuItem>
                <MenuItem>Menu Item 2</MenuItem>
            </Drawer>
        </div>
    );
} }

My Browserify and Babel task at Gulp:

Gulp.task('Browserify', Function() {

browserify({
    entries: './app/app.js',
    extensions: config.extensions,
    debug: config.debug
})
    .transform(babelify,{presets: ["es2015", "react"]})
    .bundle()
    .pipe(source(config.bundleConfigs.outputName))
    .pipe(gulp.dest(config.bundleConfigs.dest));

});

Answer 1

The error that is giving you is because it is not yet possible to "officially" implement properties in Classes.

That’s called Class Properties and is being discussed to be incorporated into ES7. This feature is currently in phase 2.

That is, back to your question, when you have

class DrawerSimpleExample extends React.Component {
    constructor(props) {
        super(props);
        this.state = {open: false};

    }

    handleToggle = () => this.setState({open: !this.state.open});
}

handleToggle = is an illegal statement within the class as it is not part of Ecmascript. The only thing that is possible in ES6 is to create methods, and add properties like handleToggle after the declaration of the class with

DrawerSimpleExample.prototype.handleToggle = () => DrawerSimpleExample.setState({open: !DrawerSimpleExample.state.open}); 

Solution:

use the module stage-o babel (as you pointed out) to convert "future" code into code that Node/webpack knows how to use.