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

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) {
    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 (
        <h1>Ja<span className="highlight">mmm</span>ing</h1>
        <div className="App">
            onSearch={this.search} />
          <div className="App-playlist">
              onAdd={this.addTrack} />
              onSave={this.savePlaylist} />

  componentDidMount() {

export default App;

you are missing .bind here, change it to

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

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

1 Like

We all make mistakes, never mind :boom:.

1 Like