Material UI for React: Simple Table Demonstration Won't Render

Question

I have spent the better part of a day trying in vain to get this “simple” demonstration table, which I found at Material_UI Simple Table Demonstration, in the documentation covering the Table object of the Material_UI package. Nothing I have tried has worked; as good as it’s ever been is that it compiles, but falls over when opened in any Web browser; I’ve tried both Edge and Chrome with identical outcomes. Although the application compiles, when opened in either Edge or Chrome, it immediately reports Type Error: unable to get property 'root' of undefined or null reference.

To get this far, I made two modifications to the demonstration script cited above. My modified script is as follows.

/*
    ============================================================================
    File Name:          /material_ui_table_demo/src/index.js

    File Abstract:      This file contains my slightly modified version of the
                        SimpleTable demonstration app shown in the material_UI
                        documentation page for the Table element.

    Remarks:            I made two changes, both marked with comments prefixed
                        with "2018/04/03 DAG:."

    File Author:        David A. Gray, MBA

    Reference:          https://material-ui-next.com/demos/tables/

    ----------------------------------------------------------------------------
    Revision History
    ----------------------------------------------------------------------------

    Date       By  Synopsis
    ---------- --- -------------------------------------------------------------
    2018/04/03 DAG Completed and tested
    ============================================================================
*/

import React from 'react';
import ReactDOM from 'react-dom';                           // 2018/04/03 DAG: Copied from tic_tac_toe/src/index.js to satisfy ReactDOM.render
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 => ({
  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 SimpleTable(props) {
  const { classes } = props;
return (
    <div className = {classes.root}>
        <Paper className={classes.root}>
            <Table className={classes.table}>
                <TableHead>
                    <TableRow>
                        <TableCell>Dessert (100g serving)</TableCell>
                        <TableCell numeric>Calories</TableCell>
                        <TableCell numeric>Fat (g)</TableCell>
                        <TableCell numeric>Carbs (g)</TableCell>
                        <TableCell numeric>Protein (g)</TableCell>
                    </TableRow>
                </TableHead>
                <TableBody>
                    {data.map(n => {
                        return (
                                    <TableRow key={n.id}>
                                        <TableCell>{n.name}</TableCell>
                                        <TableCell numeric>{n.calories}</TableCell>
                                        <TableCell numeric>{n.fat}</TableCell>
                                        <TableCell numeric>{n.carbs}</TableCell>
                                        <TableCell numeric>{n.protein}</TableCell>
                            </TableRow>
                                );
                    })}
                </TableBody>
            </Table>
        </Paper>
    </div>
  );
}
SimpleTable.propTypes = {
  classes: PropTypes.object.isRequired,
};

//  ----------------------------------------------------------------------------
//  2018/04/03 DAG: Since both apps have this block, I copied it from
//                  tic_tac_toe/src/index.js.
//  ----------------------------------------------------------------------------

ReactDOM.render(
  <SimpleTable />,
  document.getElementById ( 'root' )
);

export default withStyles(styles)(SimpleTable);

My illustrated problem statement is in this small Microsoft Word document, and the application is in this 7-zip archive, which contains everything, including the local node_modules directory that was populated by the script in the React Starter Kit and augmented with Material_UI@next, per the directions given here.

Since I cannot get this "simple" demonstration to render, I am rapidly losing confidence in the Material_UI package. Nevertheless, before I write it off as more Google hype, I'd like to get another pair or two of eyes on the problem, to see whether there is something simple that I've overlooked.

Hailing frequencies are open.

Answer 1

The answer turned out to be deceptively simple; specify a height (implicitly in pixels, it would appear), and pass in the styles constant as the value of the classes property, which is marked as required, immediately above, at the end of the table definition.

The updated source code contains the small change, which is in the CodeDOM.render block, at the very bottom of index.js.

ReactDOM.render(
  <SimpleTable height="700"
               classes={styles} />,
  document.getElementById ( 'root' )
);

The example supplied in the Material_UI docs would be much more useful if it were actually complete and ready to run.