How do I open and close a Material-UI Dialog in Meteor/React?
12,705
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>
);
}
})
Author by
minnymauer
Updated on June 22, 2022Comments
-
minnymauer almost 2 years
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.
-
minnymauer over 7 yearsI think my issue is babel. I've seen that many times looking into this issue and I've also looked at their documentation. I don't know what it is and didn't think it was needed as it's not mentioned in the Dialog part of Material-UI. Would I just need babel-cli using
npm install --save babel-cli
? -
Drew Schuster over 7 yearsSharing your webpack config would be really helpful here. You're probably already using babel, but you have to specify which plugins you need. Do you have anything like babel in your package.json, or do you have a .babelrc file?
-
minnymauer over 7 yearsAnd then add the
.babelrc
to the root of the project? -
minnymauer over 7 yearsI do not have a
.babelrc
nor babel in my package.json. -
Drew Schuster over 7 yearsHow are you building or executing your javascript file?
-
minnymauer over 7 yearsMeteor does all of the building and execution.
-
Drew Schuster over 7 yearsTry my other answer below, you can avoid this whole babel mess if you'd rather :)