Get Help with Jamming project issues

Path to project: https://www.codecademy.com/paths/full-stack-engineer-career-path/tracks/fscp-22-react-part-ii/modules/wdcp-22-jammming/projects/jammming-prj

This code uses the functional component model.

Things that are going well: (there are images below)
Search results load (eventually)

Issues:
After refreshing the app, the first search loads results, but the form is cleared (as if rendering again with default values).
Subsequent searches go as expected.

In the results tracklist, the +button appears not to work, but the added tracks are reflected in the playlist’s tracklist.
This issue probably means the state is not changing. I confirmed this by typing spaces in the code,
which causes a render, and the previously selected tracks show up in the playlist’s tracklist.
Also, logging to the console shows the tracks in the playlist array. See images below.

Save To Spotify does not work.
This error appears a few times related to the Jammming project. None of the suggestions worked for me.
Uncaught TypeError: Cannot read properties of undefined (reading ‘then’)
at savePlaylist (App.js:56:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)

Images:

RE This issue: In the results tracklist, the +button appears not to work, but the added tracks are reflected in the playlist’s tracklist.
I resolved this with the following new code for addTrack and removeTrack in App.js. Unless the class version of state (this.setState) works differently, I do not understand how that version would work since the array is not changing.

The previous code used

//old code
setPlaylistTracks([tracks]) //returns the same array, so state is not changing
//new code for addTrack and removeTrack
  const addTrack = (track) => {
    const tracks = playlistTracks
      if (!tracks.includes(track.id)) {
        tracks.push(track)
        setPlaylistTracks([...tracks])  //returns a new array each time, so state does change
      }
    }
  

  const removeTrack = (track) => {
    let tracks = playlistTracks;
    tracks = tracks.filter((currentTrack) => currentTrack.id !== track.id);
     setPlaylistTracks([...tracks]);
  };

Re: Save To Spotify does not work.

It was not working because I was not supplying a name for the playlist (sigh - dumb mistake). I added a simple alert in Spotify savePlaylist to handle this for now.

Re: After refreshing the app, the first search loads results, but the form is cleared (as if rendering again with default values). This issue remains. If this is the Codecademy’s version, this problem also exists there:
http://jammming.s3-website-us-east-1.amazonaws.com

New issue: The playlist saves to Spotify but the tracks do not.
Resolved by cleaning up Spotify.js because of duplicated code. Again my fault.

Otherwise project is working and repository has been updated.

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.