Jammming project: Step 45-47

Hi i’m stuck and can not find the bug. Please help.

As you can see from the screenshots I can see my props in the dev tool. When I try to add a track clicking on ‘+’ button on UI in web browser it does not add the track.



These are my screenshots from files possibly affected by bugs in the following order: App.js, SearchResults.js, TrackList.js, Track.js.




Thanks a lot in advance for your time and feedback.

Regards

Hi, do you get any errors? And did you check if your addTrack method in your App.js receives the clicked track by logging it to the console?

Hi,

This is the weird part i don’t get any errors. I consoled.log(track.id) as you suggested and it shows the track ID on google dev tool upon click.


Screen Shot 2021-10-23 at 5.12.40 PM

But how this can help i don’t really understand. :frowning:

My idea was to just log the track – not just the track.id – on top of the method in order to see if the elements even arrives the function body and if so, what it looks like. That would be the way I would trace the error back. Since you’ve already shown that the props arrive at the tracks component, I would now go the other way.

But since you logged the id inside your if statement and there is actually an output – which I would not have expected – we’re one step further already: As I understand the id should never enter the body of the if statement, because that should just filter out those elements that are already in the list and should therefore NOT be added. Once the track is found and the if clause is true, the return statement makes you leave the function entirely without doing the push and state setting.

So let’s look at the IDs: It’s just 1, 2, 3: These aren’t IDs given by Spotify. You apparently have different tracks with the same Id. Have a look where you pass the Id to the tracks. The cause of the trouble must be there. Maybe the Spotify fetch function is what you should investigate.

Thank for taking time respoding me. i consoled loge the track just in case. Here is what you get:


Meanwhile the only place I pass the track.id is in the TraskList.js. here is how it looks:

The “fetch” function is my addTrack method. if I understand you correctly.

I see now that you‘ve got the tracks hardcoded in the App.js and you don‘t yet get them from Spotify. Yet if you want to add them, the console should never log the IDs in the first place because the condition should not be true. That means that the track to be added is never set to state because you leave the function before that.
It looks like you want to push them to the array where they already are. I can‘t compare your code to mine right now, but you could post your code from App.js (as code rather than a screenshot) in the meantime.

i have not got to that level yet. I’m only on step 45-47 where I indeed hardcode the data.


import React from "react";
import "./App.css";

import SearchBar from "../SearchBar/SearchBar";
import SearchResults from "../SearchResults/SearchResults";
import Playlist from "../PlayList/PlayList";

class App extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			searchResults: [
				{ name: "name1", artist: "artist1", album: "album1", id: 1 },
				{ name: "name2", artist: "artist2", album: "album2", id: 2 },
				{ name: "name3", artist: "artist3", album: "album3", id: 3 },
			],
			playListName: "PlayListName",
			playListTracks: [
				{
					name: "playListName1",
					artist: "playListArtist1",
					album: "playListAlbum1",
					id: 1,
				},
				{
					name: "playListName2",
					artist: "playListArtist2",
					album: "playListAlbum2",
					id: 2,
				},
				{
					name: "playListName3",
					artist: "playListArtist3",
					album: "playListAlbum3",
					id: 3,
				},
			],
		};
		this.addTrack = this.addTrack.bind(this);
	}

	addTrack(track) {
		let tracks = this.state.playListTracks;

		if (tracks.find((savedTrack) => savedTrack.id === track.id)) {
			console.log(track.id);
			console.log(track);
			return;
		}
		tracks.push(track);
		this.setState({ playListTracks: tracks });
	}

	render() {
		return (
			<div>
				<h1>
					Ja<span className='highlight'>mmm</span>ing
				</h1>
				<div className='App'>
					<SearchBar />
					<div className='App-playlist'>
						<SearchResults
							searchResults={this.state.searchResults}
							onAdd={this.addTrack}
						/>
						<Playlist
							playListName={this.state.playListName}
							playListTracks={this.state.playListTracks}
						/>
					</div>
				</div>
			</div>
		);
	}
}

export default App;


Ok there we go. You want to push the track from the searchResults array to the playlistTracks array - if the tracks aren‘t already in there. You do that by checking if a track with the same Id as the one you‘re trying to add is not already in the playlist first and in case it is not, you add the track. But the hardcoded tracks in your playlist have the same IDs as the ones in your searchResults array.
Just change the IDs in the two lists so you don‘t have duplicate IDs.

1 Like

@mirja_t Thank you so much. It indeed was the issue. All works now. :slight_smile:

1 Like