title: ternary operator issue in React return
body: <p>I'm trying to use a return with a ternary. But I have an error saying <code>Unexpected token, expected &quot;,&quot; (31:21)</code> on the dot of <code>Object.keys</code> but I don't know what is it. I would like some help to figure it out, please.</p>
  <pre class="lang-js prettyprint-override"><code>import React, { Component } from 'react';
  import SpotifyLogin from 'react-spotify-login';
  import axios from 'axios';
  import '../style.css';
  import SelectWidget from './SelectWidget';
  
  class SpotLogin extends Component {
      state = {
          authData: {}
      }
      
  
      stockInfo = (e) =&gt; {
          this.setState({
              authData: e
          });
      }
  
      getUserInfo() {
          axios('https://api.spotify.com/v1/me', {
              method: 'GET',
              headers: {'Authorization' : 'Bearer ' + this.state.authData.access_token}
          })
          .then(data =&gt; {
              console.log(data.data);
          })
      }
  
      render() {
          return( 
              {  Object.keys(this.state.authData).length === 0 ? (
                  &lt;div&gt;
                      &lt;SpotifyLogin clientId = MY_ID
                      redirectUri = 'http://localhost:3000/callback'
                      onSuccess={this.stockInfo}
                      buttonText= &quot;Spotify&quot;
                      className= &quot;btn-spotify&quot;
                      /&gt;
                  &lt;/div&gt;
                  ) : 
                  &lt;div&gt;
                      &lt;SelectWidget /&gt;    
                  &lt;/div&gt; 
              }
          )
      }
  }
  
  export default SpotLogin;
  </code></pre>