Converting Class Properties

Question

So, I just tried to get a dialog with Google stuff. I am very new to meteor and react, so for me this may be more obvious.

however, my console gives me this error:

Missing class properties
   transform.

on line 16 in this file:

export default class DialogExampleCustomWidth extends React.Component {

  state = {
    open: false,
  };

  handleOpen = () => {
    this.setState({open: true});
  };

  handleClose = () => {
    this.setState({open: false});
  };

  render() {
    const actions = [
      <FlatButton
        label="Cancel"
        primary={true}
        onTouchTap={this.handleClose}
      />,
      <FlatButton
        label="Submit"
        primary={true}
        onTouchTap={this.handleClose}
      />,
    ];

    return (
      <div>
        <RaisedButton label="Dialog With Custom Width" onTouchTap={this.handleOpen} />
        <Dialog
          title="Dialog With Custom Width"
          actions={actions}
          modal={true}
          contentStyle={customContentStyle}
          open={this.state.open}
        >
          This dialog spans the entire width of the screen.
        </Dialog>
      </div>
    );
  }
}

the error appears on state = { I read about several articles, but it seems I could not get it. Thank you for your help and time.

Answer 1

Meteor does not support the default arrow functions, but today you can simply change this:

add the following package:

meteor npm install --save-dev babel-plugin-transform-class-properties

Modify your package package.json in your project and add the following to make the package work:

 "babel": {
    "plugins": ["transform-class-properties"]

  }

Answer 2

:

export default class DialogExampleCustomWidth extends React.Component {

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

  handleOpen = () => {
    this.setState({open: true});
  };

  ......
}

Answer 3

, .

:

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

2 things you can specify here:

• You always need to call the base class with super () if you use the constructor
• You pass the details to the base class if you want to have access to this.props in the constructor. In this case, super () will do as you are not accessing this.props.

read here and here (from the React team directly)