title: why does my react header does not render at all?
body: <p>So I have a a component called Header that will display a nav bar depending if a user is logged in or not, the props I am passing is a prop from the parent component that returns true as the user is already authenticated after login</p>
  
  <p><strong>App</strong></p>
  
  <pre><code> &lt;Header IsLoggedIn={this.state.IsLoggedIn} /&gt;  
  </code></pre>
  
  <p>then this is my Header component that is not rendering </p>
  
  <p><strong>Header</strong></p>
  
  <pre><code>// stateless functional component
  import React from 'react';
  import { NavLink } from 'react-router-dom'; //import Navlink to create nav links and to put active class on any link that is active
  import UserGreeting from './UserGreeting'
  import GuestGreeting from './GuestGreeting'
  /*Header- Displays the top menu bar for the application and 
  includes buttons for signing in and signing up 
  (if there's not an authenticated user) or the user's first and last name 
  and a button for signing out (if there's an authenticated user).*/
  
  
  function Header(props) {
    const isLoggedIn = props;
    console.log(props)
    if (isLoggedIn ===true) {
      return &lt;UserGreeting /&gt;;
    }
    else if(isLoggedIn===false) {
      return &lt;GuestGreeting /&gt;;
    }
  }
  
  export default Header;
  </code></pre>
  
  <p>this is the error I get when I reload the page:</p>
  
  <p><em>Uncaught Invariant Violation: Header(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.</em> Can someone help?</p>