Show Dialog on MenuItem click

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?

there is </DialogExampleSimple> in material-ui docs. put it into menu item like this </MenuItem chidren={</DialogExampleSimple>} — devellopah
Hard to read your example code, I think your Dialog is in a wrong place (as AppBar props?) in your example. Basically you should use MenuItem Click to control visibility of your dialog. When somebody clicks About change this.state.open to true. You should have somewhere in render Dialog component that takes this this.state.open and you shouldn't keep Dialog component inside IconMenu — niba

mewc mewc · Accepted Answer · 2018-03-28T23:22:43

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>
)
}

Show Dialog on MenuItem click

1 Answers