Jamming very odd errors

Hello everyone,

I’m almost done with the Jammings project and I corrected many errors that I could find but then there are some errors which I’m not sure I understand what they even mean. Can you please help me.

Thank you very much.

Do you have a method named search in your App component in App.js?

I do and here is my App.js code:

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

import SearchBar from '../SearchBar/SearchBar';
import SearchResults from '../SearchResults/SearchResults';
import Playlist from '../Playlist/Playlist';
import Spotify from '../../util/Spotify';


class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      SearchResults: [], 
      playlistName: 'My Playlist',
      playlistTracks: []
    };

    this.addTrack = this.addTrack.bind(this); 
    this.removeTrack = this.removeTrack.bind(this);
    this.updatePlaylistName = this.updatePlaylistName.bind(this);
    this.savePlaylist = this.savePlaylist.bind(this);
    this.search = this.search.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 });
    }

    savePlaylist() {
      const trackUris = this.state.playlistTracks.map(track => track.uri);
      Spotify.savePlaylist(this.state.playlistName, trackUris).then(() => {
        this.setState({
          playlistName: 'New Playlist',
          playlistTracks: []
        })
      })
    }

    search(term) {
      Spotify.search(term).then(SearchResults => {
        this.setState({ SearchResults: SearchResults })
      })
    }

  render() {
    return (
      <div>
  <h1>Ja<span className="highlight">mmm</span>ing</h1>
  <div className="App">
    <SearchBar onSearch={this.search} />
    <div className="App-playlist">
      <SearchResults SearchResults={this.state.SearchResults} 
                     onAdd={this.addTrack} />
      <Playlist playlistName={this.state.playlistName}
                playlistTracks={this.state.playlistTracks} 
                onRemove={this.removeTrack} 
                onNameChange={this.updatePlaylistName} 
                onSave={this.savePlaylist} />
    </div>
  </div>
</div>
    )
  }
}

export default App

I can’t duplicate the problem with the code you posted. I dropped it into my completed project and could search fine:

The only way I can duplicate the issue is if I rename the search() method so that this.search is undefined.
image

I think rewriting the search method fixed the issue, cause not it’s no longer part of the errors :D, it does have a new one though :see_no_evil:

That’s great! At least the original issue has been resolved now and you know why it happened.

Now you can begin to debug the rest of your code.