Jammming project - addTrack method updating App state but not rendering in Tracklist

Hello,

I’m working through the Jammming project everything seems to be okay so far, but when I click on the ‘+’ symbol in the (hard coded) search results the track isn’t rendering in the playlist. The state is being successfully updated and passed down to the Tracklist component via the Playlist component as a prop. So I guess there is an issue with the Tracklist component not rendering the added track, however the initial tracks hardcoded to the state are rendering, so I’m not sure what the issue is. Any ideas?

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

Steps 40-47

TrackList JS

import './TrackList.css';
import React from 'react';
import Track from '../Track/Track'

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} 
                            onRemove={this.props.onRemove}
                            isRemoval={this.props.isRemoval} />
                }
                )}
            </div>
        )
    }
};

export default TrackList;

App JS

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: [
      {
        artist: 'Oasis',
        name: 'Masterplan',
        album: 'Masterplan',
        id: 1
      },
      {
        artist: 'No Doubt',
        name: 'Dont Speak',
        album: 'Tragic Kingdom',
        id: 2
      },
      {
        artist: 'Verve',
        name: 'The Drugs Dont Work',
        album: 'Urban Hymms',
        id: 3
      }
      ],

      playlistName: "PLAYLIST",

      playlistTracks: [
        {
          artist: 'Oasis1',
          name: 'Masterplan1',
          album: 'Masterplan1',
          id: 11
        },
        {
          artist: 'No Doubt1',
          name: 'Dont Speak1',
          album: 'Tragic Kingdom1',
          id: 21
        },
        {
          artist: 'Verve1',
          name: 'The Drugs Dont Work1',
          album: 'Urban Hymms1',
          id: 31
        }
      ]
    }; 
    
    this.addTrack = this.addTrack.bind(this);
    this.removeTrack = this.removeTrack.bind(this);
  }

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

  removeTrack(track){
    let newList = this.state.playlistTracks;
    newList = newList.filter(savedTrack => savedTrack.id !== track.id);
    this.setState = ({ playlistTracks: newList });
  }

      
  

 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 
        playlist={this.state.playlistName} 
        playlistTracks={this.state.playlistTracks}
        onRemove={this.removeTrack} />
    </div>
  </div>
</div>
    );
  }
};

export default App;


Hello, and welcome to the forums!

Take a closer look at this part of your code. Try logging some values to see if they are what you expect.

Click here for another hint

Specifically, check the value of newList. push() does not return a full array with the new value appended.

Click here for an alternative way

Consider using a spread operator ... instead to add the new track.

      this.setState({
        playlistTracks: [...this.state.playlistTracks, track]
      });

Thanks for your reply! I looked at the addTrack method in App JS as suggested. Logging newList just logged the number of items in the array, I’m not exactly sure why, so I need to re-look at that. I’m slightly confused because like I said the track was being successfully added to the playlistTracks array in the state and then passed as a prop to TrackList so I don’t understand why the added track wasn’t rendering. I’ve never used the spread operator, nor do I understand it yet, but it seems to work.

However to try and use terminology I’ve already learned and understand I changed my code to this:

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

logging newList now lists the expected result, the tracks prop in TrackList updates accordingly but it doesn’t render the additional Track components. I’m confused as to why. To add to my confusion when I toggle the isRemoval prop in the dev tools the additional Track components do render.

Do you know why this is? Sorry, I don’t just want it to work, I want to know why it works / doesn’t.

I’ve made my code work by removing else block around the push method and setState method. Like this:

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

I’m still not certain why that would fix the issue…

Both of those would work, but you need to fix the line above. You did more than just remove the else. Notice how you aren’t actually calling this.setState() in this one, but instead trying to use the =

Keep in mind, you could avoid newList entirely with the spread operator ...

this.setState({ playlistTracks: [...this.state.playlistTracks, track] });

Argh! So annoying how I make little simple errors like that. It’s working now! Thank you for your time, I’m grateful.

I’ve also read up on the spread operator now, very useful. Thanks.

Don’t be too annoyed with yourself. Making these type of errors now is giving you valuable experience with debugging and refactoring. You’ll be an even stronger developer in the end.

1 Like