Material UI popper anchorEl state not changing

Question

I am using Material UI popper but the state of anchorEl is stuck at null. Material UI has an example with functional component on how to use the popper. I am using class based component but the logic is similar. Help me find what's missing or going wrong please.

export class Toolbar extends PureComponent<IToolbarProps, IToolbarState> {
    constructor(props) {
        super(props);
        this.state = {
            anchorEl: null,
            open: false,
        };

        flipOpen = () => this.setState({ ...this.state, open: !this.state.open });

        handlePopper = (event: React.MouseEvent<HTMLElement>) => {
            this.state.anchorEl
                 ? this.setState({ anchorEl: null })
                 : this.setState({ anchorEl: event.currentTarget });
                  this.flipOpen();
        };
        
        render(){
                const open = this.state.anchorEl === null ? false : true;
                const id = this.state.open ? 'simple-popper' : null;
                return(
                    <section>
                    <button onClick={this.handlePopper}>Color</button>
                    <Popper
                        id={id}
                        open={this.state.open}
                        anchorEl={this.state.anchorEl}
                        transition
                    >
                        {({ TransitionProps }) => (
                            <Fade {...TransitionProps} timeout={350}>
                                <Paper>Content of popper.</Paper>
                            </Fade>
                        )}
                    </Popper>
                </section>
                )
            }
    }

Answer 1

These are the things I noticed.

• anchor is set to null which is not required
• spreading of state in filpOpen, which is not required
• constructor was not closed properly
• not sure why we have const id and open, its not required

Try this code.

export class Toolbar extends PureComponent<IToolbarProps, IToolbarState> {
  constructor(props) {
    super(props);
    this.state = {
      anchorEl: null,
      open: false,
    };
  }
  flipOpen = () => this.setState({ open: !this.state.open });

  handlePopper = (event: React.MouseEvent<HTMLElement>) => {
    this.setState({ anchorEl: event.currentTarget });
    this.flipOpen();
  };

  render() {
    const open = this.state.anchorEl === null ? false : true;
    const id = this.state.open ? "simple-popper" : null;
    return (
      <section>
        <button onClick={this.handlePopper}>Color</button>
        <Popper
          id="simple-popper"
          open={this.state.open}
          anchorEl={this.state.anchorEl}
          transition
        >
          {({ TransitionProps }) => (
            <Fade {...TransitionProps} timeout={350}>
              <Paper>Content of popper.</Paper>
            </Fade>
          )}
        </Popper>
      </section>
    );
  }
}