title: Getting **Error: Invalid hook call. Hooks can only be called inside of the body of a function component. **
body: <p>i am using material ui and when i use menu component than getting error <strong>Error: Invalid hook call. Hooks can only be called inside of the body of a function component.</strong>  i am using react with material-ui framework with Axios API. i am using react with material-ui framework with Axios API. i am using react with material-ui framework with Axios API</p>
  
  <pre><code>import React, { Component } from 'react'
  import ApiService from "../../service/ApiService";
  import Table from '@material-ui/core/Table';
  import TableBody from '@material-ui/core/TableBody';
  import TableCell from '@material-ui/core/TableCell';
  import TableHead from '@material-ui/core/TableHead';
  import TableRow from '@material-ui/core/TableRow';
  import Button from '@material-ui/core/Button';
  import CreateIcon from '@material-ui/icons/Create';
  import DeleteIcon from '@material-ui/icons/Delete';
  import Typography from '@material-ui/core/Typography';
  import { Grid, FormGroup, FormControlLabel } from '@material-ui/core';
  import Switch from '@material-ui/core/Switch';
  class CategoryListUserComponent extends Component&lt;any,any&gt;{
  
      constructor(props: any){
          super(props)
          this.state = {
              users: [],
              message: null
          }
          this.deleteUser = this.deleteUser.bind(this);
          this.editUser = this.editUser.bind(this);
          this.addUser = this.addUser.bind(this);
          this.reloadUserList = this.reloadUserList.bind(this);
      }
  
      componentDidMount() {
          this.reloadUserList();
      }
  
      reloadUserList() {
          ApiService.fetchUsers()
              .then((res) =&gt; {
                  this.setState({users: res.data})
              });
      }
  
      deleteUser(userId: any) {
          ApiService.deleteUser(userId)
             .then(res =&gt; {
                 this.setState({message : 'User deleted successfully.'});
                 this.setState({users: this.state.users.filter((user: { id: any; }) =&gt; user.id !== userId)});
             })
      }
  
      editUser(id: any) {
          window.localStorage.setItem("userId", id);
          this.props.history.push('/edit-user');
      }
  
      addUser() {
          window.localStorage.removeItem("userId");
          this.props.history.push('/add-user');
      }
  
      render() {
          const [checked, setChecked] = React.useState(false);
  
          const toggleChecked = () =&gt; {
            setChecked((prev) =&gt; !prev);
          };
          return (
              &lt;Grid&gt;
                                  &lt;Typography variant="h4" style={style}&gt;User Details&lt;/Typography&gt;
                  &lt;Button variant="contained" color="primary" onClick={() =&gt; this.addUser()}&gt;
                      Add User
                  &lt;/Button&gt;
                  &lt;Grid  container   className="listContainer"&gt;
                  &lt;Table&gt;
                      &lt;TableHead&gt;
                          &lt;TableRow&gt;
                              &lt;TableCell&gt;Id&lt;/TableCell&gt;
                              &lt;TableCell&gt;Initiator&lt;/TableCell&gt;
                              &lt;TableCell align="left"&gt;Category&lt;/TableCell&gt;
                              &lt;TableCell align="left"&gt;Date&lt;/TableCell&gt;
                              &lt;TableCell align="left"&gt;Time&lt;/TableCell&gt;
                              &lt;TableCell align="left"&gt;&lt;/TableCell&gt;
                              &lt;TableCell align="left"&gt;&lt;/TableCell&gt;
                              &lt;TableCell align="left"&gt;&lt;/TableCell&gt;
                          &lt;/TableRow&gt;
                      &lt;/TableHead&gt;
                      &lt;TableBody&gt;
                          {this.state.users &amp;&amp; this.state.users.map((row: { id: {} | null | undefined; name: React.ReactNode; email: React.ReactNode; username: React.ReactNode; age: React.ReactNode; salary: React.ReactNode; }) =&gt; (
                              &lt;TableRow&gt;
                                  &lt;TableCell component="th" scope="row"&gt;
                                      {row.id}
                                  &lt;/TableCell&gt;
                                  &lt;TableCell align="left"&gt;{row.name}&lt;/TableCell&gt;
                                  &lt;TableCell align="left"&gt;{row.username}&lt;/TableCell&gt;
                                  &lt;TableCell align="left"&gt;13-10-2020&lt;/TableCell&gt;
                                  &lt;TableCell align="left"&gt;10:00 AM&lt;/TableCell&gt;
                                  &lt;TableCell align="left"&gt;&lt;FormGroup&gt;
                                      &lt;FormControlLabel
                                          control={&lt;Switch size="small" checked={checked} onChange={toggleChecked} /&gt;}
                                          label="Small"
                                      /&gt;
                                      &lt;FormControlLabel
                                          control={&lt;Switch checked={checked} onChange={toggleChecked} /&gt;}
                                          label="Normal"
                                      /&gt;
                                      &lt;/FormGroup&gt;
                                      &lt;/TableCell&gt;
                                  &lt;TableCell align="left" onClick={() =&gt; this.editUser(row.id)}&gt;&lt;CreateIcon /&gt;&lt;/TableCell&gt;
                                  &lt;TableCell align="left" onClick={() =&gt; this.deleteUser(row.id)}&gt;&lt;DeleteIcon /&gt;&lt;/TableCell&gt;
  
                              &lt;/TableRow&gt;
                          ))}
                      &lt;/TableBody&gt;
                  &lt;/Table&gt;
  
              &lt;/Grid&gt;
              &lt;/Grid&gt;
          );
      }
  
  }
  
  const style ={
      display: 'flex',
      justifyContent: 'center'
  }
  
  export default CategoryListUserComponent;
  </code></pre>