[Solved] functional component to class component

You should be able to use a functional component regardless of really understanding how they work, but converting functional components is fairly trivial if you understand react state/props/lifecycle.

Basic steps:

1. Convert all state hooks to single state object and update all state update functions to now use this.setState with the correct state to be merged.
2. Convert effect hooks to appropriate lifecycle function (usually componentDidMount, componentDidUpdate, and/or componentWillUnmount.
3. Convert ref hook to regular react.createRef`.
4. Convert all callback and utility functions to be instance functions (remove const).
5. Move previous return into render lifecycle function
6. Update all state/prop, and callback and utility functions to correctly access this of the component, either for function invocation or state/prop access.

Class-based component

import React, { Component, createRef } from "react";
import Button from "@material-ui/core/Button";
import Dialog from "@material-ui/core/Dialog";
import DialogActions from "@material-ui/core/DialogActions";
import DialogContent from "@material-ui/core/DialogContent";
import DialogContentText from "@material-ui/core/DialogContentText";
import DialogTitle from "@material-ui/core/DialogTitle";

export default class ScrollDialog extends Component {
  state = {
    open: false,
    scroll: "paper"
  };

  handleClickOpen = scrollType => () => {
    this.setState({
      open: true,
      scroll: scrollType
    });
  };

  handleClose = () => {
    this.setState({ open: false });
  };

  descriptionElementRef = createRef();

  componentDidUpdate(prevProps, prevState) {
    if (this.state.open) {
      const { current: descriptionElement } = this.descriptionElementRef;
      if (descriptionElement !== null) {
        descriptionElement.focus();
      }
    }
  }

  render() {
    const { open, scroll } = this.state;
    return (
      <div>
        <Button onClick={this.handleClickOpen("paper")}>scroll=paper</Button>
        <Button onClick={this.handleClickOpen("body")}>scroll=body</Button>
        <Dialog
          open={open}
          onClose={this.handleClose}
          scroll={scroll}
          aria-labelledby="scroll-dialog-title"
          aria-describedby="scroll-dialog-description"
        >
          <DialogTitle id="scroll-dialog-title">Subscribe</DialogTitle>
          <DialogContent dividers={scroll === "paper"}>
            <DialogContentText
              id="scroll-dialog-description"
              ref={this.descriptionElementRef}
              tabIndex={-1}
            >
              {[...new Array(50)]
                .map(
                  () => `Cras mattis consectetur purus sit amet fermentum.
  Cras justo odio, dapibus ac facilisis in, egestas eget quam.
  Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
  Praesent commodo cursus magna, vel scelerisque nisl consectetur et.`
                )
                .join("\n")}
            </DialogContentText>
          </DialogContent>
          <DialogActions>
            <Button onClick={this.handleClose} color="primary">
              Cancel
            </Button>
            <Button onClick={this.handleClose} color="primary">
              Subscribe
            </Button>
          </DialogActions>
        </Dialog>
      </div>
    );
  }
}