CODEWITHSUNDEEP
reactjs
János
János

Reputation: 35100

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

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?

enter image description here

Upvotes: 0

Views: 56

Answers (3)

Safi Nettah
Safi Nettah

Reputation: 1170

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);

Upvotes: 1

Ido
Ido

Reputation: 5768

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);

Upvotes: 1

Ricardo Gonzalez
Ricardo Gonzalez

Reputation: 1879

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

Upvotes: 0

Related Questions