ternary operator issue in React return - reactjs

Question

I'm trying to use a return with a ternary. But I have an error saying Unexpected token, expected "," (31:21) on the dot of Object.keys but I don't know what is it. I would like some help to figure it out, please.
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) => {
this.setState({
authData: e
});
}
getUserInfo() {
axios('https://api.spotify.com/v1/me', {
method: 'GET',
headers: {'Authorization' : 'Bearer ' + this.state.authData.access_token}
})
.then(data => {
console.log(data.data);
})
}
render() {
return(
{ Object.keys(this.state.authData).length === 0 ? (
<div>
<SpotifyLogin clientId = MY_ID
redirectUri = 'http://localhost:3000/callback'
onSuccess={this.stockInfo}
buttonText= "Spotify"
className= "btn-spotify"
/>
</div>
) :
<div>
<SelectWidget />
</div>
}
)
}
}
export default SpotLogin;

Answer 1

You only need curly braces inside JSX. The Object.keys statement isn't technically inside the JSX, it's just being directly returned. So try removing the curly braces around it:
render() {
return(
Object.keys(this.state.authData).length === 0 ? (
<div>
<SpotifyLogin clientId = MY_ID
redirectUri = 'http://localhost:3000/callback'
onSuccess={this.stockInfo}
buttonText= "Spotify"
className= "btn-spotify"
/>
</div>
) :
<div>
<SelectWidget />
</div>
)
}