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.

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