Help with jammming project

When you ask a question, don’t forget to include a link to the exercise or project you’re dealing with!

If you want to have the best chances of getting a useful answer quickly, make sure you follow our guidelines about how to ask a good question. That way you’ll be helping everyone – helping people to answer your question and helping others who are stuck to find the question and answer! :slight_smile:

https://www.codecademy.com/paths/web-development/tracks/front-end-applications-with-react/modules/jammming/projects/jammming-prj

Hello, I am REALLY STRUGGLING with this jammming app. I have 2 issues:
1. I keep getting an error that states:

TypeError: Cannot read property ‘then’ of undefined

47 |
48 | savePlaylist() {
49 | const trackUris = this.state.playlistTracks.map(track => track.uri);>
50 | Spotify.savePlaylist(this.state.playlistName, trackUris).then(() => { | ^
51 | this.setState({
52 | playlistName: ‘New Playlist’,
53 | playlistTracks:

2. My app will not list any results.


Below is my Spotify.js code:



[spotify.txt|attachment]

spotify.txt (2.6 KB)

Below is my App.js code:




app.txt (2.6 KB)

Any help would be greatly appreciated!

Same issue. My app was working up until we connected to Spotify, so it must be something with the ‘then’ chaining. My eyes are strained now, so will have to pick it back up later. I’ve watched, re-watched and watched some more and I can’t figure out where my issue is.

So, I was sitting here thinking, we never added functionality to actually fire the search when the button was clicked… Maybe I missed it when going back through the video? Either way, this resolved my issue.

In your SearchBar.js file, locate the button and try adding: onClick={this.search}

I’d love to know if this worked for you!

5 Likes

OMG!!! That worked!!!

I watched that video 5 or 6 times. Did I miss this too!?! Thank you sooooooooooooooooooooooooooooooooooooooo jdrmiller!!!

1 Like

Thanks for that, I was having the same issue. Problem now is that once I click the search bar, I get an invalid client error page. Any clue why this is happening?

Please help!

Make sure your redirect url matches exactly to the url in the spotify dashboard. Mine was missing the trailing slash, once resolved, no Invalid client errors. Good luck!

2 Likes

Thanks for pointing that out, it wasn’t the issue but it set my eyes to the right direction. Instead of passing down clientId to the conditional statement, I wrote ${clientID}. I used capital letter on the d. Well that solved that issue which brought me to a new one.

Right, now everything seems to be working well, I type in the artist name, click search and the function actually works. I then add a few songs to the playlist and change the name.

Problem is, when I press the button save to Spotify. This happens:

I re-watched the video a few times and I don’t see what can possible be wrong.

Any suggestions?

Hi there, regarding your first issue,

1. I keep getting an error that states:

TypeError: Cannot read property ‘then’ of undefined

What did you do to fix that?

@rdefa001 I only received that error when I was trying to save an empty playlist. Once I resolved the search issue, I no longer received errors. Can you post your code and I’ll take a look? Maybe start a new thread?

2 Likes

I kept getting that “then undefined” error until I added the onClick={this.search) to the button in searchbar.js. After that, it went away.

2 Likes

Thanks to all participants. This information really helped.

There still is a minor flaw: I never get search results the first time I enter a term. Has this to do with the expiration of the access token?

Question: How do you check if your playlist was really saved somewhere?

Regards, Frank.

Hi Frank,

Since we are using the Spotify API, you should see the playlist in your spotify account (or whatever account you used to authenticate).

As for your search results, it could be. It’s hard to tell though. Are you getting an error message? However, I will say that I enter a term, click search, and then I’m required to authenticate. After authenticating, I’m returned to a blank search form and have to re-enter my term. This is because we haven’t saved the previous state before authenticating, so there’s nothing to return to… if that makes sense. It’s like refreshing the page. And, I will get a time out after so many moments (I forget exactly), but then have to re-authenticate. So, your app could be operating correctly if this is what you mean by:

Hope this helps!

Jessica

Hi Jessica,
thanks for your answer. Yes, the search is exactly the way you describe it. As for the playlists: I logged on to developer.spotify.com, then clicked the tile of my app. I saw a bunch of graphs. One of them is called "Number of Requests/Endpoints. When I hover over one of the dots in this graph, it tells that I made

So I guess my app works OK. However, I thought I might be able to see the playlist and the titles therein even though I do not have a regular Spotify account.

Thanks again,

Frank.

1 Like

So I was having the same issue, went through the forum to find help. Thought I had it solved, but when I added the onClick={this.search} I went from getting no results to getting this error message. Any ideas? Thank you in advance for any insite!
-Tyke

Did you read the error message?
It describes some situation that isn’t sensible. Do you agree that the described thing does indeed not make sense and would cause a crash? And, how does that situation compare to what you meant to happen in that location of your code?

The situation described should make sense to you, and you should know what you meant for your code to do, so it should be an understandable problem.

Some programs will just tell you: ? when something is wrong. You’ve got a whole lot more than that to follow up on.

That doesn’t help me at all.

Well, that’s how somehow who can solve it would solve it.

There’s nothing about difficult javascript or involved libraries described in the error. It’s things you probably already know.

It says something about undefined. What is that?
What is a property?
Does undefined have a property of 0?
Does that correspond to anything in the displayed code?
What is that code supposed to do?

So I’d argue that you are that person, so long as you’re willing to break down the information that’s given to you. It may even be that you don’t know all of it, but then that would be something you can google, experiment with, ask about, and then come back to the bigger problem and put all the parts together.