title: Error Message: Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component
body: <p>I get a blankpage when I try to run my app and nothing is being rendered.</p>
  <blockquote>
  <p>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
  See <a href="https://reactjs.org/link/invalid-hook-call" rel="nofollow noreferrer">https://reactjs.org/link/invalid-hook-call</a> for tips about how to debug and fix this problem.</li>
  </ol>
  </blockquote>
  <pre><code>import React,{ useState} from 'react';
  import styled from 'styled-components'
  import MenuIcon from '@material-ui/icons/Menu';
  import CloseIcon  from '@material-ui/icons/Close';
  
  function Header() {
      const [burgerState,setBurgerState] = useState(false);
      return (
      &lt;Container&gt;
          &lt;a href='#'&gt;
              &lt;img src='/images/logo.svg' alt=''/&gt;
          &lt;/a&gt;
          &lt;MenuGroup&gt;
              &lt;div&gt;Model S&lt;/div&gt;
              &lt;div&gt;Model X&lt;/div&gt;
              &lt;div&gt;Model Y&lt;/div&gt;
          &lt;/MenuGroup&gt;
          &lt;RightMenu&gt;
              &lt;a href='#'&gt;Shop&lt;/a&gt;
              &lt;a href='#'&gt;Tesla Account&lt;/a&gt;
          &lt;MenuIconContainer onClick={ () =&gt; setBurgerState(true)} &gt;
              &lt;MenuIcon/&gt;
          &lt;/MenuIconContainer&gt;
          &lt;/RightMenu&gt;
          &lt;BurgerNav status={burgerState}&gt;
              &lt;CloseContainer&gt;
                &lt;Close onClick={ () =&gt; setBurgerState(false)} /&gt;
              &lt;/CloseContainer&gt;
              &lt;li&gt;&lt;a href='#'&gt;Model S&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href='#'&gt;Model Y&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href='#'&gt;Existing inventory&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href='#'&gt;Used inventory&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href='#'&gt;Trade-in&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href='#'&gt;Cybertruck&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href='#'&gt;Roadster&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href='#'&gt;Semi&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href='#'&gt;Charging&lt;/a&gt;&lt;/li&gt;
          &lt;/BurgerNav &gt;
      &lt;/Container&gt;
    )
  }
  
  export default Header;
  
  const Container = styled.div`
  display: flex;
  min-height: 60px;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  `;
  
  
  const MenuGroup = styled.div`
  display: flex;
  text-transform: uppercase;
  div {
      font-weight: 600;
      padding: 0 10px;
      cursor: pointer;
  }
  
  @media(max-width: 760px) {
      display: none;
  }
  `;
  
  const RightMenu = styled.div`
  display: flex;
  a {
      font-weight: 600;
      text-transform: uppercase;
      padding-right: 20px;
  }
  `;
  
  const MenuIconContainer = styled.div`
  display:flex;
  align-iems:center;
  cursor:pointer;
  `;
  
  const CloseContainer = styled.div`
  display: flex;
  justify-content: flex-end;
  `
  
  const Close = styled(CloseIcon)`
  `;
  
  const BurgerNav = styled.div`
  position: fixed;
  width: 300px;
  background: white;
  top: 0;
  right: 0;
  bottom: 0;
  padding: 20px;
  list-style: none;
  transform: ${props =&gt; props.status ? 'translateX(0)' : 'translateX(100%)'};
  transition: transform 0.2s ease-in;
  li {
      padding: 15px 0;
      border-bottom: 1px solid rgba(0, 0, 0, .2);
      a {
          font-weight: 600;
      }
  }
  `
  </code></pre>