Playlist Name Change

Okay I have yet another problem that I can’t seem to figure out. Every time I go to change the name of the playlist, I get an error as soon as I either remove or add a letter. It doesn’t seem to matter which. Below is there error I get.

I tried to go back to the lesson as well to research this and I cannot seem to find a solution. Below here is my code that would correspond to this aspect.

Playlist.js

import React from 'react';

import './Playlist.css';

import Tracklist from '../Tracklist/Tracklist';

class Playlist extends React.Component {
    constructor(props) {
        super(props);
        
        this.handleNameChange = this.handleNameChange.bind(this);
    }
    
    handleNameChange(event) {
        this.props.onNameChange(event.target.value);
    }
    
    render () {
        return (
            <div className="Playlist">
                <input onChange={this.handleNameChange} defaultValue={"New Playlist"} />
                <Tracklist tracks={this.props.playlistTracks}
                    onRemove={this.props.onRemove}
                    isRemoval={true}
                    onNameChange={this.updatePlaylistName} />
                <button className="Playlist-save">SAVE TO SPOTIFY</button>
            </div>
        )
    }
}

export default Playlist;

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: [
        { 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: 'My Playlist',
      playlistTracks: [{ name: 'playlistName1', artist: 'playlistArtist1', album: 'playlistAlbum1', id: 4 }, { name: 'playlistName2', artist: 'playlistArtist2', album: 'playlistAlbum2', id: 5 }, { name: 'playlistName3', artist: 'playlistArtist3', album: 'playlistAlbum3', id: 6 }]
    };
    this.addTrack = this.addTrack.bind(this);
    this.removeTrack = this.removeTrack.bind(this);
    this.updatePlaylistName = this.updatePlaylistName.bind(this);
  }

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

    tracks.push(track);
    this.setState({ playlistTracks: tracks });
  }

  removeTrack(track) {
    let tracks = this.state.playlistTracks;
    tracks = tracks.filter(currentTrack => currentTrack.id !== track.id);


    this.setState({ playlistTracks: tracks });
  }

  updatePlaylistName(name) {
    this.setState({playlistName: name});
  }

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

export default App;

What am I doing wrong?

Hi Alex,

I think you should pass onNameChange to <Playlist /> in App.js, not to <Tracklist />

So should I remove it from onNameChange from <Tracklist /> in Playlist.js and then put onNameChange in to <Playlist /> in App.js? I just want to make sure that’s what you’re advising because it doesn’t seem to be working either. I keep getting the same error message. However it does seem to be narrowed down to one place instead of two like the other one appears to be. Should I move handleNameChange(event) { this.props.onNameChange(event.target.value); } to App.js as well?

1 Like

Actually that is what did it. After moving everything over to App.js it now works correctly and no errors pop up! Yay!

Sexy Party

1 Like

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