title: TypeError: Cannot read property 'state' of undefined - function
body: <pre><code>    import React from 'react';
  import { makeStyles, useTheme } from '@material-ui/core/styles';
  import Card from '@material-ui/core/Card';
  import CardContent from '@material-ui/core/CardContent';
  import CardMedia from '@material-ui/core/CardMedia';
  import IconButton from '@material-ui/core/IconButton';
  import Typography from '@material-ui/core/Typography';
  import SkipPreviousIcon from '@material-ui/icons/SkipPrevious';
  import PlayArrowIcon from '@material-ui/icons/PlayArrow';
  import SkipNextIcon from '@material-ui/icons/SkipNext';
  
  const useStyles = makeStyles(theme =&gt; ({
    card: { 
      position: 'fixed',
      zIndex:999,
      bottom: theme.spacing(2),
      left: theme.spacing(2),
      display: 'flex',
      maxWidth:'300px',
    },
    details: {
      display: 'flex',
      flexDirection: 'column',
    },
    content: {
      flex: '1 0 auto',
    },
    cover: {
      width: 151,
    },
    controls: {
      display: 'none',
      alignItems: 'center',
      paddingLeft: theme.spacing(1),
      paddingBottom: theme.spacing(1),
    },
    playIcon: {
      height: 38,
      width: 38,
    },
  }));
  
  export default function MediaControlCard() {
    const classes = useStyles();
    const theme = useTheme();
    const state = {
      count: 0,
    }
  
    const componentDidMount = () =&gt; {
      this.interval = setInterval(() =&gt; {
        this.setState(({ count }) =&gt; ({ count: count + 1 }));
      }, 1000);
    }
    const componentWillUnmount = () =&gt; {
      clearInterval(this.interval);
    }
    return (
      &lt;Card className={classes.card}&gt;
        &lt;CardMedia
          className={classes.cover}
          image="//storage.googleapis.com/radiomediapodcast/budcast/BudCast.png"
          title="Live from space album cover"
        /&gt;
        &lt;div className={classes.details}&gt;
          &lt;CardContent className={classes.content}&gt;
            &lt;Typography id="Now_Playing_Title" component="h5" variant="h5"&gt;
              Live From Space  {this.state.count}
            &lt;/Typography&gt;
            &lt;Typography id="Now_Playing_Artist" variant="subtitle1" color="textSecondary"&gt;
              Mac Miller
            &lt;/Typography&gt;
          &lt;/CardContent&gt;
          &lt;div className={classes.controls}&gt;
            &lt;IconButton aria-label="previous"&gt;
              {theme.direction === 'rtl' ? &lt;SkipNextIcon /&gt; : &lt;SkipPreviousIcon /&gt;}
            &lt;/IconButton&gt;
            &lt;IconButton aria-label="play/pause"&gt;
              &lt;PlayArrowIcon className={classes.playIcon} /&gt;
            &lt;/IconButton&gt;
            &lt;IconButton aria-label="next"&gt;
              {theme.direction === 'rtl' ? &lt;SkipPreviousIcon /&gt; : &lt;SkipNextIcon /&gt;}
            &lt;/IconButton&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
      &lt;/Card&gt;
    );
  }
  </code></pre>
  
  <p>I am getting the following error <code>TypeError: Cannot read property 'state' of undefined</code></p>