title: TypeError: Cannot read property 'root' of undefined
body: <p>I'm trying to put a BasicTable function from Material-Ui to my React.js file. <br> Here is my code.<br></p>
  
  <pre><code> import React, { Component } from 'react';
   import { Route, Redirect, Switch, Link, HashRouter} from 'react-router-dom';
   import firebase, { auth, provider } from '../firebase.js';
   import '../App.css';
  
   // Material-ui theme
   import NavBar from '../profile_pages/navBar';
  
   //For Table Material-ui
   import classNames from 'classnames';
   import PropTypes from 'prop-types';
   import { withStyles } from 'material-ui/styles';
   import Table, { TableBody, TableCell, TableHead, TableRow } from 'material-ui/Table';
   import Paper from 'material-ui/Paper';
  
   const styles = theme =&gt; ({
    root: {
      width: '100%',
      marginTop: theme.spacing.unit * 3,
      overflowX: 'auto',
    },
    table: {
      minWidth: 700,
    },
  });
  
  let id = 0;
  function createData(name, calories, fat, carbs, protein) {
    id += 1;
    return { id, name, calories, fat, carbs, protein };
  }
  
  const data = [
    createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
    createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
    createData('Eclair', 262, 16.0, 24, 6.0),
    createData('Cupcake', 305, 3.7, 67, 4.3),
    createData('Gingerbread', 356, 16.0, 49, 3.9),
  ];
  
  function BasicTable(props) {
    const { classes } = props;
  
    return (
      &lt;Paper className={classes.root}&gt;
        &lt;Table className={classes.table}&gt;
          &lt;TableHead&gt;
            &lt;TableRow&gt;
              &lt;TableCell&gt;Dessert (100g serving)&lt;/TableCell&gt;
              &lt;TableCell numeric&gt;Calories&lt;/TableCell&gt;
              &lt;TableCell numeric&gt;Fat (g)&lt;/TableCell&gt;
              &lt;TableCell numeric&gt;Carbs (g)&lt;/TableCell&gt;
              &lt;TableCell numeric&gt;Protein (g)&lt;/TableCell&gt;
            &lt;/TableRow&gt;
          &lt;/TableHead&gt;
          &lt;TableBody&gt;
            {data.map(n =&gt; {
              return (
                &lt;TableRow key={n.id}&gt;
                  &lt;TableCell&gt;{n.name}&lt;/TableCell&gt;
                  &lt;TableCell numeric&gt;{n.calories}&lt;/TableCell&gt;
                  &lt;TableCell numeric&gt;{n.fat}&lt;/TableCell&gt;
                  &lt;TableCell numeric&gt;{n.carbs}&lt;/TableCell&gt;
                  &lt;TableCell numeric&gt;{n.protein}&lt;/TableCell&gt;
                &lt;/TableRow&gt;
              );
            })}
          &lt;/TableBody&gt;
        &lt;/Table&gt;
      &lt;/Paper&gt;
    );
  }
  
  class Charity extends Component {
    constructor() {
      super()
      this.state = {
        open: false
      }
    }
  
    //For nav
    handleToggle() {
      this.setState({
        open: !this.state.open
      })
    }
  
    render() {
     return (
        &lt;div&gt;
          &lt;NavBar
            onToggle={() =&gt; this.handleToggle()}
            open={this.state.open}
          /&gt;
  
          {&lt;BasicTable/&gt;}
        &lt;/div&gt;
      );
    }
  }
  
  BasicTable.propTypes = {
    classes: PropTypes.object.isRequired,
  };
  
  export default Charity;
  </code></pre>
  
  <p>
  Now I have some errors as following.<br></p>
  
  <pre><code> &lt;BasicTable&gt;
  
    42 |  const { classes } = props;
    43 | 
    44 |  return (
  &gt; 45 |    &lt;Paper className={classes.root}&gt;
    46 |      &lt;Table className={classes.table}&gt;
    47 |        &lt;TableHead&gt;
    48 |          &lt;TableRow&gt;
  
  &lt;./src/index.js&gt;
     8 | //make click events enable to use 
     9 | injectTapEventPlugin();
    10 | 
  &gt; 11 | ReactDOM.render(&lt;Root/&gt;, document.getElementById('root'));
    12 | registerServiceWorker();
    13 | 
    14 | 
  </code></pre>
  
  <p>What I'm stacking on the action is about the way to call the BasicTable(props) function at the render of Charity class. <br><br>
  How should I resolved the error?<br>
  The BasicTable() function is brought from an example of Material-ui website (<a href="https://material-ui-next.com/demos/tables/" rel="nofollow noreferrer">https://material-ui-next.com/demos/tables/</a>).<br>
  Then I put the code to my one without any changes.<br></p>