class SimplePopper extends React.Component {
  state = {
    anchorEl: null,
    open: false
  };

  handleClick = event => {
    const { currentTarget } = event;
    this.setState(state => ({
      anchorEl: currentTarget,
      open: !state.open
    }));
  };

  render() {
    const { classes } = this.props;
    const { anchorEl, open } = this.state;
    const id = open ? "simple-popper" : null;

    return (
      <React.Fragment>
        <Backdrop open={open} onClick={() => this.setState({ open: false })} />
        <div>
          <Button
            aria-describedby={id}
            variant="contained"
            onClick={this.handleClick}
          >
            Toggle Popper
          </Button>
          <Popper id={id} open={open} anchorEl={anchorEl} transition>
            {({ TransitionProps }) => (
              <Fade {...TransitionProps} timeout={350}>
                <Paper>
                  <Typography className={classes.typography}>
                    The content of the Popper.
                  </Typography>
                </Paper>
              </Fade>
            )}
          </Popper>
        </div>
      </React.Fragment>
    );
  }
}

<Backdrop open={open} onClick={() => this.setState({ open: false })} />

<Backdrop open={open} />