title: How to use Material Ui on React. getting error Invalid Hook call
body: <p>`×
  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:</p>
  <ol>
  <li>You might have mismatching versions of React and the renderer (such as React DOM)</li>
  <li>You might be breaking the Rules of Hooks</li>
  <li>You might have more than one copy of React in the same app`</li>
  </ol>
  <p>I am new to React, my code was working fine but I decided to use MaterialUi today, now it's giving me errors, I have tried googling but I didn't succeed. Another thing is that my <code>this.state.events</code> is returning an Empty array, instead of a list of <code>events</code>. How do I fix this?
  My React-dom version is <code>─ react-dom@16.13.1  </code> and React version is <code>─ react@16.13.1  </code></p>
  <pre><code> import React, { Component } from &quot;react&quot;;
   import { Link } from &quot;react-router-dom&quot;;
   import axios from &quot;axios&quot;;
  
   import { makeStyles } from &quot;@material-ui/core/styles&quot;;
   import GridList from &quot;@material-ui/core/GridList&quot;;
   import GridListTile from &quot;@material-ui/core/GridListTile&quot;;
   import GridListTileBar from &quot;@material-ui/core/GridListTileBar&quot;;
   import ListSubheader from &quot;@material-ui/core/ListSubheader&quot;;
   import IconButton from &quot;@material-ui/core/IconButton&quot;;
  
  
  
  
  
  
    export default class EventsList extends Component {
       constructor(props) {
          super(props);
         this.state = { events: [] };
      }
  
    componentDidMount() {
      axios
       .get(&quot;http://localhost:9000/events/&quot;)
       .then((response) =&gt; {
        this.setState({ events: response.data });
      })
       .catch(function (error) {
        console.log(error);
      });
    }
  
  
   render() {
     const useStyles = makeStyles((theme) =&gt; ({
       root: {
         display: &quot;flex&quot;,
         flexWrap: &quot;wrap&quot;,
         justifyContent: &quot;space-around&quot;,
         overflow: &quot;hidden&quot;,
         backgroundColor: theme.palette.background.paper,
        },
        gridList: {
         width: 500,
         height: 450,
       },
       icon: {
        color: &quot;rgba(255, 255, 255, 0.54)&quot;,
       },
     }));
  
     const classes = useStyles();
  
      return (
        &lt;div className={classes.root}&gt;
        &lt;GridList cellHeight={180} className={classes.gridList}&gt;
         &lt;GridListTile key=&quot;Subheader&quot; cols={2} style={{ height: &quot;auto&quot; }}&gt;
           &lt;ListSubheader component=&quot;div&quot;&gt;December&lt;/ListSubheader&gt;
          &lt;/GridListTile&gt;
          {this.state.events.map((tile) =&gt; (
            &lt;GridListTile key={tile.img}&gt;
              &lt;img src={tile.img} alt={tile.title} /&gt;
              &lt;GridListTileBar
                title={tile.title}
                subtitle={&lt;span&gt;by: {tile.author}&lt;/span&gt;}
                actionIcon={
                  &lt;IconButton
                    aria-label={`info about ${tile.title}`}
                    className={classes.icon}
                  &gt;&lt;/IconButton&gt;
                }
              /&gt;
            &lt;/GridListTile&gt;
          ))}
        &lt;/GridList&gt;
      &lt;/div&gt;
    );
  }
  }
  </code></pre>