title: React Hooks - render component conditionally based on state
body: <p>I am trying to create a basic <code>react</code> functional component with hooks. </p>
  
  <pre><code>import React, { useState, useEffect } from 'react';
  import Header from 'test-header';
  import Dashboard from 'test-dashboard';
  import { api } from '../api';
  
  function storeUser(user) {
    if (user) {
      localStorage.user = JSON.stringify(user);
    } else {
      delete localStorage.user;
    }
  }
  
  async function login() {
    const [error, setError] = useState([]);
    const [user, setUser] = useState([]);
  
    try {
      const user = await api({
        endpoint: 'identity/login',
        method: 'POST',
        json: {
          email: 'test@abc.com',
          password: '12345'
        }
      });
      setUser(user);
      storeUser(user);
    } catch (err) {
      setError(err);
    }
  }
  
  function Container() {
    return (
      &lt;div&gt;
        &lt;Header /&gt;
        &lt;input type="submit" value="Login" onClick={login}&gt;&lt;/input&gt;
        {/* if user sets in state then render &lt;Dashboard /&gt; else render error message  */}
      &lt;/div&gt;
    );
  }
  
  export default Container;
  </code></pre>
  
  <p>Here, <code>test-header</code> component published as <code>npm</code> package works fine. When I click the <code>Login</code> button, I am getting this error:</p>
  
  <blockquote>
    <p>react-dom.development.js?61bb:16178 Uncaught (in promise) Error:
    Invalid hook call. Hooks can only be called inside of the body of a
    function component.</p>
  </blockquote>
  
  <p><strong>How do I check whether <code>user</code> has been set in state or not and based on that render <code>Dashboard</code> component with <code>react-hooks</code>?</strong></p>