[FIXED] Why 'Invalid Hook Call Warning' for Material-UI and Facebook Login example for React?

Issue

What is wrong in this code? I put it together from a material-ui example and facebook login button react example.

import React, { Component } from 'react';
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 Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';
import FacebookLogin from 'react-facebook-login';

export default class Demo extends Component {

  useStyles = makeStyles(theme => ({
    root: {
      flexGrow: 1,
    },
    menuButton: {
      marginRight: theme.spacing(2),
    },
    title: {
      flexGrow: 1,
    },
  }));

  classes = this.useStyles();
  handleClick = event => this.setState({ anchorEl: event.currentTarget })
  handleClose = () => this.setState({ anchorEl: null })
  state = {
    isLoggedIn: false,
    userID: '',
    name: '',
    email: '',
    piture: '',
    anchorEl: null,
    setAnchorEl: null
  };

  componentClicked = () => {
    console.log("componentClicked");
  };

  responseFacebook = (response) => {
    console.log(response);
    this.setState({
      isLoggedIn: true,
      userID: response.userID,
      name: response.name,
      email: response.email,
      picture: response.picture
    });
    console.log(response);
  };

  render() {
    let fbContent;
    if (this.state.isLoggedIn) {
      fbContent = "hello"; //this.state.name;
    } else {
      fbContent = (<FacebookLogin appId="2526636684068727"
            autoLoad={true}
            fields="name,email,picture"
            onClick={this.componentClicked}
            callback={this.responseFacebook}
            cssClass="my-facebook-button-class"/>);
    }

    return (
    <div>
    <AppBar position="static">
    <Toolbar>
    <Typography variant="h6" className={this.classes.title}>
      Tiket.hu
    </Typography>
    <Button color="inherit">Search</Button>
    <Button color="inherit">Basket</Button>
    {fbContent}
    </Toolbar>
    </AppBar>
    {fbContent}
    </div>
    );
  }
}

Solution

I have also faced a situation like this, and this is really strange what I did was I took out everything and put inside separate component.

In your case you might want to take out all your Fb login functionality into a separate component and just import this component into your main component

Answered By - waqar

Answer Checked By - Mildred Charles (PHPFixing Admin)