Spotify Jammming - Comparing two strings using === and returning false

Get Help React.js
,
#1

Hi all,

I’m on the second part of the Jammming project using React and the Spotify API. I’m trying to compare two strings, one held in the props within an array of objects and another held in the props within an object. I’m iterating over the array of objects then declaring the necessary string and comparing it to the string of this component. In the console on the values that do match, both evaluate to the same string (I’ve checked using typeof) but the comparison keeps evaluating to a falsy.

// function within a component class
    isInPlaylist() {
        if (this.props.playlistTracks) {
            this.props.playlistTracks.forEach(playlistTrack => {
                console.log(playlistTrack.uri) //reading "spotify:track:61mWefnWQOLf90gepjOCb3" as a string
                console.log(this.props.track.uri) //reading "spotify:track:61mWefnWQOLf90gepjOCb3" as a string
                if (playlistTrack.uri === this.props.track.uri) { 
                    return true;
                }
            })
        }
        return false;
    }

When both the console.logs are reading the same value this still returns as false. This applies to all matching values that are passed through the second if statement. Am I missing something?

Please help! I can’t tell if I’ve messed up in the logic of the code or if I’m genuinely missing something :thinking:

Thanks in advance,

Aidan.

#2

Hi Aidan,

are you sure that it actually returns false? Did youconsole.log(playlistTrack.uri === this.props.track.uri) to verify that or do you just miss an effect of your return statement?
That is because you use forEach. The forEach method does not return anything. What do you want to happen if true is returned?

#3

Hi Mirja,

I haven’t actually console logged playlist track uri, I’ll give that a try in a bit. Basically, if the function returns true (if a song is already in the playlist) I want the state of a button component to be ‘-’ rather than ‘+’.

I’ve just realised that the return statement within the loop probably returns true for the function within the forEach and not the function as a whole.

#4

I’m pretty sure that it will log ‘true’. But that doesn’t have an effect within a forEach method. If you want the method to return anything, you’ll have to use .map() instead.

In your code I don’t see anything with this functionality.

#5

I just changed it to this, now it works:

    isInPlaylist() {
        let isTrue = false;
        if (this.props.playlistTracks) {
            this.props.playlistTracks.forEach(playlistTrack => {
                if (playlistTrack.uri === this.props.track.uri) {
                    isTrue = true;
                }
            })
        }
        return isTrue;
    }

Thanks for the help, I probably would have been scratching my head for ages if you’d never pointed out the forEach!

In your code I don’t see anything with this functionality.

Sorry, I probably should have included the renderAction() method in there as well.

1 Like
#6 
isInPlaylist() {
  return this.props.playlistTracks
  .map(el => el.uri)
  .includes(this.props.track.uri)
}

A forEach is a bit complicated for this, you should be able to make it a littler simpler with other array methods. The above should do the same.

1 Like
#7

Your’s looks a lot more efficient, but I’m getting this now…

TypeError: Cannot read properties of undefined (reading ‘map’)

#8

I corrected the syntax error in the code above. Due to copy paste I had a superfluous parenthesis in the first line.

#9

I removed that parenthesis but I’m still getting the same TypeError :face_with_raised_eyebrow:

I don’t see why map is reading undefined but forEach isn’t…

#10

In your forEach you have

I don’t do this because I assumed you initialized this.props.playlistTracks as an empty array. What does his.props.playlistTracks look like if there aren’t any results?

#11

I have initialized it as an empty array as a state in another component which passes it down to the tracks props.

#12

Then maybe my assumption what this.props.playlistTracks and this.props.track.uri are in your App isn’t right.
I wrote the same thing as a function. Then you can compare if the structure is the same:

const itemUri = 'spotify:track:61mWefnWQOLf90gepjOCb3';
const playlistTracks1 = [];
const playlistTracks2 = [
{uri: 'spotify:track:61mWefnWQOLf90gepjOCb3'}
];

const isInPlaylist = (arr, uri) => {
  return arr
  .map(el => el.uri)
  .includes(uri)
}

const isInList1 = isInPlaylist(playlistTracks1, itemUri);
const isInList2 = isInPlaylist(playlistTracks2, itemUri)
console.log(isInList1) // false
console.log(isInList2) // true

Where is this.props.track.uri defined? Isn’t that passed as an argument to isInPlaylist() when it is called?

1 Like