title: Reference undefined state?
body: <p>I'm trying to achive authentification using jwt. I have a login form that sends an ajax request via an action creater to a rest API. The rest API either returns a http400 or a user object with a token. In my website header I want to show the username of a user if that user is logged in. If the user is logged in a token will be in the application state (I know, thats not the safest place for the token). </p>
  
  <p>However, I can't seem to reference the token since it is undefined whenever the user is not logged in. So the question: How can I reference a piece of state if it does not exist yet?</p>
  
  <p>example for header: </p>
  
  <pre><code>class Header extends Component {
  
      render() {
        return (
          &lt;div&gt;{this.props.auth.user.email}&lt;/div&gt;
        );
      }
    }
  
    function mapStateToProps(state) {
      return { auth: state.auth };
  }
  
  export default connect(mapStateToProps) (Header);
  </code></pre>
  
  <p>I've tried:</p>
  
  <pre><code>if {!this.props.auth.user.name}
  </code></pre>
  
  <p>And also:</p>
  
  <pre><code>if {this.props.auth.user.name === undefined}
  </code></pre>
  
  <p>Both can't be rendered since the variable is not defined.</p>
  
  <p>I bet a million beginners had the same problem before but I could not find a solution via search. Sorry for that.</p>