Jamming: Feature request - Function is defined, but an error says it is not a function

Get Help React.js
#1

I’m trying to extend the functionality of Jamming as required for part two, but I’m getting an error this.getPlaylists is not a function when I try to call a function getPlaylists() in componentDidMount(), but I don’t understand why, since I did define and bind it.

I would appreciate any help you can give me figuring out what’s wrong.

// App.js
import React from 'react';
import {SearchBar} from '../SearchBar/SearchBar';
import {Playlist} from '../Playlist/Playlist';
import {SearchResults} from '../SearchResults/SearchResults';
import Spotify from '../../util/Spotify';
import './App.css';


class App extends React.Component {
  constructor(props) {
    super(props);
    this.addTrack = this.addTrack.bind(this);
    this.removeTrack = this.removeTrack.bind(this);
    this.getPlaylists = this.getPlaylists(this);
    this.updatePlaylistName = this.updatePlaylistName.bind(this);
    this.savePlaylist = this.savePlaylist.bind(this);
    this.search = this.search.bind(this);

    this.state = {
      playlistName: 'New Playlist',
      playlistTracks: [],
      savedPlaylists: [],
      searchResults: []
    };
  }

  getPlaylists() {
    Spotify.getPlaylists().then(savedPlaylists => {
      this.setState({savedPlaylists: savedPlaylists});
    });
  }

  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>
    );
  }

  componentDidMount() {
    this.getPlaylists();
  }
}

export default App;
#2

you are missing .bind here, change it to

this.getPlaylists = this.getPlaylists.bind(this);
1 Like
#3

Well that was a dumb mistake. Good catch, thanks!

1 Like
#4

We all make mistakes, never mind :boom:.

1 Like