ReactJS Invalid hook call while add useStyle variable - reactjs

Question

I am trying to write a from but it throws me this error:
Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
This is App.js file where i am writing the form:
import React, { Component } from 'react';
import TextField from '#material-ui/core/TextField';
import './App.css';
import useStyles from '../src/styleMaker'
import { makeStyles } from '#material-ui/core/styles';
class App extends Component {
state = {
ssn: '',
}
useStyles = makeStyles(theme => ({
container: {
display: 'flex',
flexWrap: 'wrap',
},
textField: {
marginLeft: theme.spacing(1),
marginRight: theme.spacing(1),
width: 200,
},
dense: {
marginTop: 19,
},
menu: {
width: 200,
},
paper: {
padding: theme.spacing(2),
textAlign: 'center',
color: theme.palette.text.secondary,
},
button: {
margin: theme.spacing(1),
},
}));
classes = useStyles();
onHandleChange(event) {
this.setState({
[event.target.name]: event.target.value
});
}
render() {
return (
<React.Fragment>
<form noValidate autoComplete="off">
<TextField
id=""
label="SSN"
value={this.state.ssn}
onChange={(event) => this.onHandleChange(event)}
type="number"
name='ssn'
margin="normal"
className={this.classes.textField}
/>
<TextField
id=""
label="SSN"
value={this.state.phone}
onChange={(event) => this.onHandleChange(event)}
type="number"
name='phone'
margin="normal"
className={this.classes.textField}
/>
</form>
</React.Fragment>
);
}
}
export default App;
Can anyone help me whats wrong with my code? Why my code is not working?
When i add userStyle, then i throws me the error, Can anyone help me in this case?
I spend hour to fix this issue but now i just give up on it. Anyone helps will make my day.. Thanks in advance

Answer 1

As the error is suggesting you
Hooks can only be called inside of the body of a function component
You are using a class based component here, you can convert this class based component to functional component, you would also need to use useState Hook for your state in functional Component, you can do this,
const App = () => {
const [ssn, setSsn ] = useState('')
const classes = useStyles()
// remaining code
return (
....
)
}
Also when you use functional component you cannot use this inside functional component
Hope it helps

Answer 2

You can not use hooks from within class based components. If you want to use hooks, you need to convert your components to functional, something along the following lines:
function App() {
const classes = useStyles();
...
return (
...
)
}