title: How can I convert popover MATERIAL-UI functional component to class based component?
body: <p>I'm trying to convert this functional component to class based component. I have tried for several hours but could not find where to place these <code>const</code> variables in component. If someone could write it out in class based component it will highly appreciated.</p>
  
  <pre><code>const useStyles = makeStyles(theme =&gt; ({
    typography: {
      padding: theme.spacing(2),
    },
  }));
  function SimplePopper() {
    const classes = useStyles();
    const [anchorEl, setAnchorEl] = React.useState(null);
  
    function handleClick(event) {
      setAnchorEl(anchorEl ? null : event.currentTarget);
    }
  
    const open = Boolean(anchorEl);
    const id = open ? 'simple-popper' : null;
  
    return (
      &lt;div&gt;
        &lt;Button aria-describedby={id} variant="contained" onClick={handleClick}&gt;
          Toggle Popper
        &lt;/Button&gt;
        &lt;Popper id={id} open={open} anchorEl={anchorEl} transition&gt;
          {({ TransitionProps }) =&gt; (
            &lt;Fade {...TransitionProps} timeout={350}&gt;
              &lt;Paper&gt;
                &lt;Typography className={classes.typography}&gt;The content of the Popper.&lt;/Typography&gt;
              &lt;/Paper&gt;
            &lt;/Fade&gt;
          )}
        &lt;/Popper&gt;
      &lt;/div&gt;
    );
  }
  
  export default SimplePopper;
  </code></pre>