CODEWITHSUNDEEP
reactjsmeteor
Peter Hughes
Peter Hughes

Reputation: 41

Missing class properties transform

So i have just tried to get the google material dialog box. I am very new to meteor and react so the answare might be more obvious for you then for me.

even so, my console are giving 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 the state = { i have read on multiple articals but can't seem to get it. Thank you for your help and time

Upvotes: 4

Views: 4812

Answers (3)

henk
henk

Reputation: 2838

Meteor does not support arrow functions by default, but today you can simply change that:

add the following package:

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

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

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

  }

Upvotes: 9

jacoballenwood
jacoballenwood

Reputation: 3057

If you want to set an initial state value, it should be set in the constructor.

An example would be this:

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

2 things to point out here:

  1. You always need to call the base class with super() if you are using a constructor
  2. You pass props to the base class if you want to be able to access this.props in the constructor. In this case super() would do, since you aren't accessing this.props.

read more here and here(from React team directly)

Upvotes: 0

Jason Xu
Jason Xu

Reputation: 885

Change your codes like this:

export default class DialogExampleCustomWidth extends React.Component {

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

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

  ......
}

Upvotes: 0

Related Questions