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?

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

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