How do I convert a React function to a class? I don't understand how to update const { classes } = props; in a function to class use. Here is a button function from Material UI: https://material-ui-next.com/demos/buttons/

import React from 'react';

import PropTypes from 'prop-types';

import { withStyles } from 'material-ui/styles';

import Button from 'material-ui/Button';



const styles = theme => ({

  button: {

    margin: theme.spacing.unit,

  },

  input: {

    display: 'none',

  },

});



function RaisedButtons(props) {

  const { classes } = props;

  return (

    <div>

      <Button variant=raised className={classes.button}>

        Default

      </Button>

      <Button variant=raised color=primary className={classes.button}>

        Primary

      </Button>

      <Button variant=raised color=secondary className={classes.button}>

        Secondary

      </Button>

      <Button variant=raised color=secondary disabled className={classes.button}>

        Disabled

      </Button>

      <input

        accept=image/*

        className={classes.input}

        id=raised-button-file

        multiple

        type=file

      />

      <label htmlFor=raised-button-file>

        <Button variant=raised component=span className={classes.button}>

          Upload

        </Button>

      </label>

    </div>

  );

}



RaisedButtons.propTypes = {

  classes: PropTypes.object.isRequired,

};



export default withStyles(styles)(RaisedButtons);

Here is my conversion to a React class component. It currently gives me an error message of 'classes' is not defined no-undef since I am missing the classes = props part.

import React, { Component } from 'react';

import Button from 'material-ui/Button';

import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';

import MyTheme from './MyTheme';

import './App.css';

import { withStyles } from 'material-ui/styles';

import PropTypes from 'prop-types';





const styles = theme => ({

  button: {

    margin: theme.spacing.unit,

  },

  input: {

    display: 'none',

  },

});





class App extends Component {

  constructor(props)

  {

    super(props);

  }  



  render() {

    return (

      <MuiThemeProvider theme={MyTheme}>

          <Button variant=raised >

          Default

          </Button>

          <Button variant=raised color=primary className={classes.button}>

          Primary

          </Button>

          <Button variant=raised color=secondary className={classes.button} >

          Secondary

          </Button>

          <Button variant=raised color=secondary className={classes.button}>

          Disabled

          </Button>

          <input

              accept=image/*

              className={classes.input}

              id=raised-button-file

              multiple

              type=file

          />

          <label htmlFor=raised-button-file>

          <Button variant=raised component=span >

            Upload

          </Button>

          </label>

      </MuiThemeProvider>

      );

  }

}



App.propTypes = {

  classes: PropTypes.object.isRequired,

};



export default withStyles(styles)(App);