Unable to show icon after showing menu Items in reactjs

Question

I have created a dropdown for the icon where when the icon is clicked, it will show the dropdown. Once we hover on Card then the three dots icon will appear. But my objective is even after showing dropdown the icon should appear. but here is my code, it is disappearing. Can anyone help me with this query?

Here is the code:

    <Card>
        <CardHeader
          className={classes.header}
          avatar={<Avatar aria-label="recipe">R</Avatar>}
          action={
            <div>
              <IconButton
                id="simple-menu"
                className={classes.showIcon}
                aria-label="settings"
                aria-controls="simple-menu"
                onClick={this.handleClick}
              >
                <MoreVertIcon />
              </IconButton>
              <Menu
                style={{ marginTop: "35px" }}
                id="simple-menu"
                keepMounted
                anchorEl={this.state.menu}
                open={Boolean(this.state.menu)}
                onClose={this.handleClose}
              >
                <MenuItem onClick={this.handleClose}>Profile</MenuItem>
                <MenuItem onClick={this.handleClose}>change password</MenuItem>
                <MenuItem onClick={this.handleClose}>Logout</MenuItem>
              </Menu>
            </div>
          }
          title="Shrimp and Chorizo Paella"
          subheader="September 14, 2016"
        />
      </Card>

Here is the sample code

Answer 1

Create a style className which sets the icon visibility to visible. Conditionally assign the class to the parent div only when the menu is open i.e. check for this.state.menu && classes.menu.

Style

const styles = theme => ({
  header: {
    background: "grey",
    "&:hover": {
      background: "yellow",
      "& $showIcon": {
        visibility: "visible"
      }
    }
  },
  showIcon: {
    visibility: "hidden"
  },
  menu: {
    "& $showIcon": {
      visibility: "visible"
    }
  }
});

JSX

<Card>
        <CardHeader
          className={classes.header}
          avatar={<Avatar aria-label="recipe">R</Avatar>}
          action={
            <div className={this.state.menu && classes.menu}>
              <IconButton
                id="simple-menu"
                className={classes.showIcon}
                aria-label="settings"
                aria-controls="simple-menu"
                onClick={this.handleClick}
              >
                <MoreVertIcon />
              </IconButton>
  ...

Working copy of your code is here