How to convert 'Functional Componenet' to 'Class Component' in React? - reactjs

Question

I would like to convert this Functional Component
import React from 'react';
import logo from './logo.svg';
import './App.css';
import { makeStyles } from '#material-ui/core/styles';
import AppBar from '#material-ui/core/AppBar';
import Toolbar from '#material-ui/core/Toolbar';
import Typography from '#material-ui/core/Typography';
import Button from '#material-ui/core/Button';
import IconButton from '#material-ui/core/IconButton';
import MenuIcon from '#material-ui/core/Menu';
import FacebookLoginButton from "./components/FacebookLoginButton"
const useStyles = makeStyles(theme => ({
root: {
flexGrow: 1,
},
menuButton: {
marginRight: theme.spacing(2),
},
title: {
flexGrow: 1,
},
}));
function App() {
const classes = useStyles();
return (
<div className="App">
<AppBar position="static">
<Toolbar>
<IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="menu">
<MenuIcon />
</IconButton>
<Typography variant="h6" className={classes.title}>
Tiket.hu
</Typography>
<Button color="inherit">Search</Button>
<Button color="inherit">Basket</Button>
<FacebookLoginButton/>
</Toolbar>
</AppBar>
</div>
);
}
export default App;
to Class Component, like below here, but I get an error. Do you know what is wrong?
import React, { Component } from "react";
import logo from './logo.svg';
import './App.css';
import { makeStyles } from '#material-ui/core/styles';
import AppBar from '#material-ui/core/AppBar';
import Toolbar from '#material-ui/core/Toolbar';
import Typography from '#material-ui/core/Typography';
import Button from '#material-ui/core/Button';
import IconButton from '#material-ui/core/IconButton';
import MenuIcon from '#material-ui/core/Menu';
import FacebookLoginButton from "./components/FacebookLoginButton"
const useStyles = makeStyles(theme => ({
root: {
flexGrow: 1,
},
menuButton: {
marginRight: theme.spacing(2),
},
title: {
flexGrow: 1,
},
}));
class App extends Component {
classes = useStyles();
render() {
return <div className="App">
<AppBar position="static">
<Toolbar>
<IconButton edge="start" className={this.classes.menuButton} color="inherit" aria-label="menu">
<MenuIcon />
</IconButton>
<Typography variant="h6" className={this.classes.title}>
Tiket.hu
</Typography>
<Button color="inherit">Search</Button>
<Button color="inherit">Basket</Button>
<FacebookLoginButton/>
</Toolbar>
</AppBar>
</div>;
}
}
export default App;
Do you know what is wrong? How should I convert differently?

Answer 1

You must use the material ui HOC with a class component
import React, { Component } from "react";
import logo from './logo.svg';
import './App.css';
import { makeStyles } from '#material-ui/core/styles';
import AppBar from '#material-ui/core/AppBar';
import Toolbar from '#material-ui/core/Toolbar';
import Typography from '#material-ui/core/Typography';
import Button from '#material-ui/core/Button';
import IconButton from '#material-ui/core/IconButton';
import MenuIcon from '#material-ui/core/Menu';
import FacebookLoginButton from "./components/FacebookLoginButton"
// import this
import { withStyles } from '#material-ui/core/styles';
// make this
const styles = theme => ({
root: {
flexGrow: 1,
},
menuButton: {
marginRight: theme.spacing(2),
},
title: {
flexGrow: 1,
},
})
class App extends Component {
render() {
return <div className="App">
<AppBar position="static">
<Toolbar>
<IconButton edge="start" className={this.props.classes.menuButton} color="inherit" aria-label="menu">
<MenuIcon />
</IconButton>
<Typography variant="h6" className={this.props.classes.title}>
Tiket.hu
</Typography>
<Button color="inherit">Search</Button>
<Button color="inherit">Basket</Button>
<FacebookLoginButton/>
</Toolbar>
</AppBar>
</div>;
}
}
export default withStyles(styles)(App);

Answer 2

Material-ui MakeStyles is using the hook pattern, which is not allowed inside class components.
Use withStyles HOC instead.
import { withStyles } from '#material-ui/core/styles';
const styles = {
root: {
flexGrow: 1,
},
menuButton: {
marginRight: theme.spacing(2),
},
title: {
flexGrow: 1,
},
};
class App extends Component {
const { classes } = this.props;
the rest of your component...
}
export default withStyles(styles)(App);

Answer 3

You are using hooks inside a Class Component this isn't allowed. Hooks are specifically made to work with Functional Components