Jammming Project - Step 47 Not Adding Track to Playlist

Hi everyone. I’m having trouble with the React Jammming project.

I’ve completed Step 47, but clicking the + button does not add the track to the playlist. I’ve used the Chrome dev tools and the props appear to be passed correctly to the relevant components. I’ve also gone through the video walkthrough up until this point and still can’t see what I’m doing wrong.

Any help would be greatly appreciated :slight_smile:

My App.js:

import { render } from '@testing-library/react';
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: "Test Playlist",

      playlistTracks: [{ name: "plName1", artist: "plArtist1", album: "plAlbum1", id: 1 }
      , { name: "plname2", artist: "plartist2", album: "plalbum2", id: 2 }
      , { name: "plname3", artist: "plartist3", album: "plalbum3", id: 3 }]
    };

    this.addTrack = this.addTrack.bind(this);
  }

  addTrack(track) {
    let tracks = this.state.playlistTracks;
    if (tracks.find(savedTrack => savedTrack.id === track.id)) {
      return;
    } else {
      tracks.push(track);
      this.setState({playlistTracks: tracks});
    }
  }

  render() {
    return ( 
      <div>
        <h1>Ja<span class="highlight">mmm</span>ing</h1>
        <div class="App">
          <SearchBar />
          <div class="App-playlist">          
            <SearchResults searchResults = {this.state.searchResults}
                           onAdd = {this.addTrack} />
            <Playlist playlistName = {this.state.playlistName}
                      playlistTracks = {this.state.playlistTracks} />
          </div>
        </div>
      </div>
    )
  }
}

render()

export default App;

My SearchResults.js:

import React from "react";
import "./SearchResults.css";
import { TrackList } from "../trackList/TrackList";

export class SearchResults extends React.Component {
    render() {
        return (
            <div className="SearchResults">
                <h2>Results</h2>
                <TrackList tracks={this.props.searchResults} 
                           onAdd={this.props.onAdd}
                           isRemoval={false} />
            </div> 
        )
    }
}

My Track.js

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

export class Track extends React.Component { 
    constructor(props) {
        super(props);
        this.addTrack = this.addTrack.bind(this);
    }

    renderAction() {
        if (this.props.isRemoval) {
            return <button className="Track-action">-</button>
        } else {
            return <button className="Track-action" onClick={this.addTrack}>+</button>
        }
    }

    addTrack() {
       this.props.onAdd(this.props.track);      
    }

    render() {
        return (
            <div className="Track">
                <div className="Track-information">
                    <h3>{this.props.track.name}</h3>
                    <p>{this.props.track.artist} | {this.props.track.album}</p>
                </div>
                {this.renderAction()}
            </div>
        )
    }
}

My TrackList.js

import React from "react";
import "./TrackList.css";
import { Track } from "../track/Track";

export class TrackList extends React.Component {
    render() {
        return (
            <div className="TrackList">
                {
                    this.props.tracks.map(track => {
                        return <Track track={track} 
                                      key={track.id} 
                                      onAdd={this.props.onAdd} />
                    })
                }
            </div>
        )
    }
}

Hi,
have you tested if your addTrack method receives a value in the first place?

What happens if you add consoles to the method? I would try the following:

addTrack(track) {
console.log(track) 

Does this log anything? If not, the method isn’t even called and you’ll have to find out why not. If it does, what does it log? Is it an object as expected and if so, does it have all the properties it should?

    let tracks = this.state.playlistTracks;
    if (tracks.find(savedTrack => savedTrack.id === track.id)) {
    console.log('filtered out:  ' + track.id)
    return;

Does this console log anything? If so, the item is filtered out because your method assumes it’s already in the Playlist. Then there is a problem with your IDs.

Ah, thank you very much. It was the IDs that were the problem. I changed the placeholder playlistTracks IDs in App.js and it is working as intended.

Thank you for your help, I’ll crack on with the rest of the project now :slight_smile:

1 Like