React Class how to AnchorEl Popover

Question

Hi I'm new to React and Hooks like useState. I'm having a hard time grasping the concept and how to use it. So I don't want to make more complex pieces and files than I have too.

I've run into a problem switching a React.component from a function to a class, Popover.

I've forked off a CodeSandbox to try to show what I'd like to switch too. But, I just can't understand the documentation well enough to make it happen.

What needs to happen to have a React.Class.Component use React-States?

<Button aria-describedby={id} variant="contained" onClick={handleClick}>
  Open Popover
</Button>
<Popover
  id={id}
  open={open}
  anchorEl={anchorEl}
  onClose={handleClose}
  anchorOrigin={{
    vertical: 'bottom',
    horizontal: 'left',
  }}
>
  <Typography sx={{ p: 2 }}>The content of the Popover.</Typography>
</Popover>

Lost the original forked example. So added some context code-block for a more self-contained SO Q&A. — Zach, May 18 '23 at 20:20

score 3 · Accepted Answer · answered May 25 '20 at 20:17

    import React, { Component } from "react";
import { makeStyles } from "@material-ui/core/styles";
import Popover from "@material-ui/core/Popover";
import Typography from "@material-ui/core/Typography";
import Button from "@material-ui/core/Button";

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

export default class SimplePopover extends Component {
  constructor(props) {
    super(props);
    // const classes = useStyles();
    // const [anchorEl, setAnchorEl] = React.useState(null);
    this.state = {
      anchorEl: null,
      open: false,
      id: undefined
    }
    this.handleClick = this.handleClick.bind(this);
    this.handleClose = this.handleClose.bind(this);

    // const open = Boolean(anchorEl);
    // const id = open ? "simple-popover" : undefined;
  }

  handleClick(event) {
    this.setState({anchorEl: event.currentTarget, open: Boolean(event.currentTarget), id: "simple-popover"});
  }

  handleClose(event) {
    this.setState({anchorEl: event.currentTarget, open: false, id: undefined});
  }

  render() {
    return (
      <div>
        <Button
          aria-describedby={this.id}
          variant="contained"
          color="primary"
          onClick={this.handleClick}
        >
          Open Popover
        </Button>
        <Popover
          id={this.id}
          open={this.state.open}
          anchorEl={this.state.anchorEl}
          onClose={this.handleClose}
          anchorOrigin={{
            vertical: "bottom",
            horizontal: "center"
          }}
          transformOrigin={{
            vertical: "top",
            horizontal: "center"
          }}
        >
          {/* <Typography className={this.classes.typography}> */}
          <div>The content of the Popover.</div>
          {/* </Typography> */}
        </Popover>
      </div>
    );
  }
}

Mistake

const [anchorEl, setAnchorEl] = React.useState(null);

You cannot use a Hook inside a class Component

So I have to make a React.component function to work with React-Hooks? There's no "Use React-Hooks inside of a React.Class.Function"? — Zach, May 25 '20 at 20:34
You can't use "React-Hooks" in Class Components you can only use them in Functional Components. Class components are those components that has class in them while function are components that just have functions — Arinze Ogbonna, May 25 '20 at 20:38
Thanks L.O. That seems like a pain - make a functional component for a single class component, but alright. — Zach, May 25 '20 at 20:39

React Class how to AnchorEl Popover

1 Answers1

Linked