rangeme rangeme - 2 months ago 63
React JSX Question

How do I open and close a Material-UI Dialog in Meteor/React?

I'm trying to have a dialog with a form pop up when the user clicks a button. I pretty much took exactly from the Dialog Material-UI site for how to do this with a button that will be used to open the Dialog and a TextField added in the Dialog. This is using Meteor and React. When I run on the server I get an error. Anyone know what

Missing class properties transform.
means?

Code

import React from 'react';
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
import FloatingActionButton from 'material-ui/FloatingActionButton';
import ContentAdd from 'material-ui/svg-icons/content/add';
import TextField from 'material-ui/TextField';

const style = {
marginRight: "20px",
position: "absolute",
left: "80%",
down: "80%",
};

export default class Events 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}
keyboardFocused={true}
onTouchTap={this.handleClose}
/>,
];

return (
<div>
<h1>Events</h1>
<FloatingActionButton style={style}>
<ContentAdd />
</FloatingActionButton>
<Dialog
title="Add Event"
actions={actions}
model={false}
open={this.state.open}
onRequestClose={this.handClose}
>
<TextField
hintText="Hint Text"
floatingLabelText="Floating Label Text"
/>
</Dialog>
</div>
);
}
}


Error

Errors prevented startup:

While processing files with ecmascript (for target web.browser):
client/events/Events.jsx:20:2: /client/events/Events.jsx: Missing class properties transform.

Your application has errors. Waiting for file change.

Answer

See my other answer for making this code work, but you can also avoid using the class syntax entirely if you'd prefer.

import React from 'react';
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
import FloatingActionButton from 'material-ui/FloatingActionButton';
import ContentAdd from 'material-ui/svg-icons/content/add';
import TextField from 'material-ui/TextField';

const style = {
  marginRight: "20px",
  position: "absolute",
  left: "80%",
  down: "80%",
};


export default const Events = React.createClass({
  getInitialState: function () {
    return {
      open: false
    }
  },
  handleOpen: () => {
    this.setState({open: true});
  },

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

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

    return (
        <div>
          <h1>Events</h1>
          <FloatingActionButton style={style}>
            <ContentAdd />
          </FloatingActionButton>
          <Dialog
            title="Add Event"
            actions={actions}
            model={false}
            open={this.state.open}
            onRequestClose={this.handClose}
          >
            <TextField
              hintText="Hint Text"
              floatingLabelText="Floating Label Text"
            />
          </Dialog>
        </div>
    );
  }
})
Comments