How can I convert popover MATERIAL-UI functional component to class based component?

Question

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 const variables in component. If someone could write it out in class based component it will highly appreciated.

const useStyles = makeStyles(theme => ({
  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 (
    <div>
      <Button aria-describedby={id} variant="contained" onClick={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>
  );
}

export default SimplePopper;

Answer 1

    import React, { Component } from "react";
    import { createMuiTheme } from "@material-ui/core/styles";
    import Typography from "@material-ui/core/Typography";
    import Button from "@material-ui/core/Button";
    import Fade from "@material-ui/core/Fade";
    import Paper from "@material-ui/core/Paper";
    import Popper from "@material-ui/core/Popper";
    import { withStyles } from "@material-ui/styles";

    const theme = createMuiTheme({
      spacing: 4
    });

    const styles = {
      typography: {
        padding: theme.spacing(2)
      }
    };
    class SimplePopper extends Component {
      constructor(props) {
        super(props);
        this.state = { anchorEl: null, open: false };
      }
      flipOpen = () => this.setState({ ...this.state, open: !this.state.open });
      handleClick = event => {
        this.state.ancherEl
          ? this.setState({ anchorEl: null })
          : this.setState({ anchorEl: event.currentTarget });
        this.flipOpen();
      };

      render() {
        const open = this.state.anchorEl === null ? false : true;
        console.log(this.state.anchorEl);
        console.log(this.state.open);
        const id = this.state.open ? "simple-popper" : null;
        const { classes } = this.props;
        return (
          <div>
            <Button
              aria-describedby={id}
              variant="contained"
              onClick={event => this.handleClick(event)}
            >
              Toggle Popper
            </Button>
            <Popper
              id={id}
              open={this.state.open}
              anchorEl={this.state.anchorEl}
              transition
            >
              {({ TransitionProps }) => (
                <Fade {...TransitionProps} timeout={350}>
                  <Paper>
                    <Typography className={classes.typography}>
                      The content of the Popper.
                    </Typography>
                  </Paper>
                </Fade>
              )}
            </Popper>
          </div>
        );
      }
    }

    export default withStyles(styles)(SimplePopper);

Answer 2

First thing one need to understand is, how class based and functional components work. Also, when and where you use it.

In short, I can say functional components are Used for presenting static data. And class based are Used for dynamic source of data.

Here are few links for your reference.

Class based component vs Functional components what is the difference ( Reactjs ) and React functional components vs classical components

To answer your specific question.

import React, { Component } from 'react';
import { withStyles, makeStyles } from '@material-ui/styles';

const useStyles = makeStyles(theme => ({
      typography: {
        padding: theme.spacing(2),
      },
}));

class SimplePopper extends Component {
   constructor(props){
      super(props)
      this.state = { anchorEl: null, setAnchorEl: null }; <--- Here see the state creation
      this.handleClick= this.handleClick.bind(this);
    }

   handleClick(event) {
        const { anchorEl, setAnchorEl } = this.state; <--- Here accessing the state
        setAnchorEl(anchorEl ? null : event.currentTarget);
   }

   render() {
      const { anchorEl, setAnchorEl } = this.state; <--- Here accessing the state
      const open = Boolean(anchorEl);
      const id = open ? 'simple-popper' : null;
      const { classes } = this.props;

      return (
        <div>
           ............Rest of the JSX............
        </div>
      );
    }
 }
export default withStyles(useStyles)(SimplePopper);

Note that here I've used withStyles to wrap the style to your component. So, that the styles will be available as classNames.

Explore the difference and convert the rest

This is more enough to begin with.