LOKI LOKI - 1 month ago 13
React JSX Question

how to open a dialog in material-ui on button click

export default class Help extends Component {
componentWillMount(){
this.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 className="container-fluid">
<button type="button" className="btn btn-primary active" id="Hlp" onTouchTap={this.handleOpen}>Help</button>
<Dialog
title="Dialog With Actions"
actions={actions}
modal={false}
open={this.state.open}
onRequestClose={this.handleClose}
>
The actions in this window were passed in as an array of React objects.
</Dialog>
</div>
);
}
}


I ve to open a dialog using material-ui for button click, Right now I see a an error in console, saying Cannot read property 'prepareStyles' of undefined..I could see button on screen

Answer

Not sure if you omitted them from your snippet only, but make sure in your real code that you have the proper material-ui imports at the top:

import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';