Show Dialog on MenuItem click - reactjs

Question

Is there a way to have a Dialog component pop up when you click on a MenuItem in a Material-UI Menu? I have a header component that returns the below JSX:
return (
<AppBar
iconElementLeft={<a href='/'><Avatar src="/static/images/favicon.ico" style={{ marginTop:4 }} /></a>}
title= {
<div>
{"Application"}
{displaySearch?<div style={{display:'inline-block', marginLeft:20, width:500}}><Search location={location}/></div>:null}
<div style={{float:'right'}}>
{logoUri ? <img src={logoUri} style={{ height:40, verticalAlign:'middle',borderRadius:3,overflow:'hidden'}} /> : null}
</div>
</div>
}
iconElementRight={
<IconMenu
iconButtonElement={
<IconButton><MoreVertIcon /></IconButton>
}
targetOrigin={{ horizontal: 'right', vertical: 'top' }}
anchorOrigin={{ horizontal: 'right', vertical: 'top' }}
>
{
menuItems.map(
menuItem => <MenuItem containerElement={<Link to={menuItem.uri} />} primaryText={menuItem.primaryText} key={menuItem.key} />)
}
<MenuItem href='#' primaryText={'about'} onTouchTap={()=>{}} />
<MenuItem href='/auth/logout' primaryText={'logout'} />
</IconMenu>
}
<Dialog ref="dialog" title="version 1.0" open={true}>
Version: {version}
</Dialog>
/>
)
I'm just trying to wire up the 'about' menu item to the dialog that pops up and displays the version information that I pass along to the page, but once I include the Dialog in the IconMenu, if you click on the IconMenu, nothing shows and I get an error:
"Menu.js:222 Uncaught TypeError: Cannot set property 'opacity' of undefined".
If I remove the Dialog component, my MenuItem works as intended. I'm not sure how exactly I can wire up a MenuItem to a Dialog. Is it possible to have a MenuItem trigger a Dialog component in Material-UI?

Answer 1

You could create the dialog as a menu item:
import MenuDialog from './MenuDialog';
Then
<IconMenu
...
<MenuDialog />
...
</IconMenu>
And now in a seperate MenuDialog.js file, as a component which is imported above
render(){
const actions = [<FlatButton
label="Close"
primary={true}
onClick={this.handleClose} />
]
return(
<div>
<MenuItem onClick={this.handleOpen}>Press for dialog </MenuItem>
<Dialog
title={Dialog name}
actions={actions}
modal={false}
open={this.state.open}
onRequestClose={this.handleClose}> Dialog writing
</Dialog>
</div>
)
}