How to solve this error with the Drawer component of Materialui

Question

How to solve this error with the Drawer component of Materialui

Navigation

#1 by (1 votes)

2

I'm trying to use the drawer of the ui material, however it 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 task of browserify and babel in 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));

});

react

asked by anonymous 12.07.2016 / 19:55

1 answer

VBA. I try to convert a txt to excel Transform date format DD / MM / YY in MM / DD / YY in Shell Script

score 1 · Accepted Answer

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

This is called Class Properties and is being discussed to be incorporated into ES7. At this point this feature is 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 declaration within the class, since it is not part of ECMAScript. The only thing that is possible in ES6 is to create methods, and add properties as handleToggle after class declaration with

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

Solution:

use the module % of Babel% (as you pointed ) to convert "future" code into code that the Node / webpack can use.