ternary operator issue in React return

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;

Jayce444 · Accepted Answer · 2020-11-14 07:15:27Z

4

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> 
   )
}

answered Nov 14, 2020 at 7:15

Jayce444

9,1234 gold badges35 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

ternary operator issue in React return

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related