TypeError: Cannot read property 'root' of undefined

Question

I\'m trying to put a BasicTable function from Material-Ui to my React.js file.
Here is my code.

 import React, { Component } from \'react\';
 import { R         


        

Answer 1

To solve the problem("TypeError: Cannot read property 'root' of undefined "), I revised {<BasicTable />} to {<BasicTable classes={styles("")}/>} receiving @Nandu Kalidindi advice.
Yeah, I finally could make a table of Material-ui, but another problem came up.
The Nav bar I made has gone to somewhere.

I will attach the picture for it.
[Before fix]

[After solve the Type Error]

Do you guys know why the kind of error happened? How could I solve the error?
I would like to keep use the nav bar after I fix the Type error.

Answer 2

• You props does not contain classes
• If you want to access classes that are in the styles constant, then you might want to do this styles(/*your theme name/*).root

const { classes } = props; doing this is assigning classes=undefined then when you are trying to access classes.root it it throwing the error.

Now, you can either change this

<Paper className={classes.root}>
      <Table className={classes.table}>

TO

// Because the theme argument is never used in the function
<Paper className={styles("").root}>
      <Table className={styles("").table}>

OR change this line in Charity component

{<BasicTable />}

TO

{<BasicTable classes={styles("")}/>} given styles