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 variable

Answer 1

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.

Answer 2

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