Invalid Hook Call React (how to assign material ui class)

Question

I´m pretty new to react and I have a problem with a hook call. I know what causes the problem but I dont know how to solve it without starting from scratch. This is the code:

import { Fragment, PureComponent } from "react";

//Test Imports
import { Input, makeStyles } from '@material-ui/core';
import Paper from '@material-ui/core/Paper';
import Grid from '@material-ui/core/Grid';
import testDaten from './testData.js';
import { Link } from "react-router-dom";
//

 //Test
 const UseStyles = makeStyles((theme) => ({
    root: {
      flexGrow: 1,
      marginTop: '100px',
      marginLeft: '100px',
      marginRight: '50px',
      
    },
  
    grid: {
      color: theme.palette.text.primary,
    },
    paper: {
      padding: theme.spacing(2),
      textAlign: 'center',
      color: theme.palette.text.primary,
    },
    photo: {
      height: '200px',
      width: '200px',
    }
    }));
    //

class Select extends PureComponent {

    state = {
      options: [
        {
          name: 'Select…',
          value: null,
        },
        {
          name: 'A',
          value: 'a',
        },
        {
          name: 'B',
          value: 'b',
        },
        {
          name: 'C',
          value: 'c',
        },
      ],
      value: '?',
    };
  
    handleChange = (event: any) => {
      this.setState({ value: event.target.value });
    };
       
    render() {

   

    const { options, value } = this.state;
    const classes = UseStyles();

        return (
          <Fragment>
            <select onChange={this.handleChange} value={value}>
              {options.map(item => (
                <option key={item.value} value={String(item.value)}>
                  {item.name}
                </option>
              ))}
            </select>
            <h1>Favorite letter: {value}</h1>
            
            {testDaten.map((item, key) => {
            if(value != null){
            return (
            <Grid item xs={4} sm={4} key={item.id}>
              <Input value={item.id} type="number" id="idTest"/> 
              <Paper className={classes.paper}> Besucher-Id: {item.id} </Paper>
              <Paper className={classes.paper}> Name: {item.vorname} {item.nachname}</Paper>
              <Paper className={classes.paper}> Nachweisart: {item.nachweisart} </Paper> 
              <Paper className={classes.paper}>   <Link to={`/zuBewertenderTest/${item.id}`}>Mehr Informationen</Link> </Paper> 
            </Grid>
          )
        }
          })}
          </Fragment>

          
        );
      }
    }

    export default Select;

Inside the render function I have const classes = UseStyles(); --> this leads to a hook error in my understanding it happens because its not in the top level. Anyhow I dont know how to assign the material ui classes without that. Maybe someone can help.

Thanks!

Answer 1

Convert class to functional component or use Hoc(withstyles) of materialui

Below code converted to withstyles access styles from classses props

import { Fragment, PureComponent } from "react";
import { Input, withStyles } from "@material-ui/core";
import Paper from "@material-ui/core/Paper";
import Grid from "@material-ui/core/Grid";
import testDaten from "./testData.js";
import { Link } from "react-router-dom";

const styles = (theme) => ({
  root: {
    flexGrow: 1,
    marginTop: "100px",
    marginLeft: "100px",
    marginRight: "50px",
  },

  grid: {
    color: theme.palette.text.primary,
  },
  paper: {
    padding: theme.spacing(2),
    textAlign: "center",
    color: theme.palette.text.primary,
  },
  photo: {
    height: "200px",
    width: "200px",
  },
});

class Select extends PureComponent {
  state = {
    options: [
      {
        name: "Select…",
        value: null,
      },
      {
        name: "A",
        value: "a",
      },
      {
        name: "B",
        value: "b",
      },
      {
        name: "C",
        value: "c",
      },
    ],
    value: "?",
  };

  handleChange = (event: any) => {
    this.setState({ value: event.target.value });
  };

  render() {
    const { classes } = this.props;
    const { options, value } = this.state;

    console.log(classes);
    return (
      <Fragment>
        <select onChange={this.handleChange} value={value}>
          {options.map((item) => (
            <option key={item.value} value={String(item.value)}>
              {item.name}
            </option>
          ))}
        </select>
        <h1>Favorite letter: {value}</h1>

        {testDaten.map((item, key) => {
          if (value != null) {
            return (
              <Grid item xs={4} sm={4} key={item.id}>
                <Input value={item.id} type="number" id="idTest" />
                <Paper className={classes.paper}>
                  {" "}
                  Besucher-Id: {item.id}{" "}
                </Paper>
                <Paper className={classes.paper}>
                  {" "}
                  Name: {item.vorname} {item.nachname}
                </Paper>
                <Paper className={classes.paper}>
                  {" "}
                  Nachweisart: {item.nachweisart}{" "}
                </Paper>
                <Paper className={classes.paper}>
                  {" "}
                  <Link to={`/zuBewertenderTest/${item.id}`}>
                    Mehr Informationen
                  </Link>{" "}
                </Paper>
              </Grid>
            );
          }
        })}
      </Fragment>
    );
  }
}

export default withStyles(styles)(Select);