Recently, I have started using React and encountered an issue with a hook call. I understand the root cause of the problem but unsure how to resolve it without starting from scratch. Here is the snippet of 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}> Visitor ID: {item.id} </Paper>
<Paper className={classes.paper}> Name: {item.firstName} {item.lastName}</Paper>
<Paper className={classes.paper}> Type of Evidence: {item.evidenceType} </Paper>
<Paper className={classes.paper}> <Link to={`/toAssessTest/${item.id}`}>More information</Link> </Paper>
</Grid>
)
}
})}
</Fragment>
);
}
}
export default Select;
I am facing a hook error within the render function due to const classes = UseStyles(); --> as far as I understand, this happens because it's not at the top level. However, I'm not sure how to apply Material UI classes without it. Any assistance on this matter would be greatly appreciated.
Thank you!