TypeError: this.props.* is not a function

Question

I get this error in my code

TypeError: this.props.* is not a function

and i cannot figure it out what is wrong with it. I have tried different approaches butt still gives me this error even if I "binded" the function to "this".

SingleCurPlaylist.js

import React from "react";

import "./SingleCurPlaylist.css";

class SingleCurPlaylist extends React.Component {
  constructor(props) {
    super(props);

    this.showList = this.showList.bind(this);
  }

  showList() {
    this.props.showList(this.props.id);
  }

  render() {
    return (
      <div className="Single-list" onClick={this.showList}>
        <h4>{this.props.name}</h4>
      </div>
    );
  }
}

export default SingleCurPlaylist;

PlayistSpotify.js

import React from "react";

import SingleCurPlaylist from "../SingleCurPlaylist/SingleCurPlaylist";

import "./PlaylistSpotify.css";

class PlaylistSpotify extends React.Component {
  constructor(props) {
    super(props);

    this.renderList = this.renderList.bind(this);
  }

  renderList() {
    this.props.getLocalPlaylists();
  }

  render() {
    return (
      <div className="PlaylistSpotify">
        <h2>Local Playlists</h2>
        <button className="Playlist-get" onClick={this.renderList}>
          Get your local playlist
        </button>
        {this.props.playlistLists.map((singlePlay) => (
          <SingleCurPlaylist
            showList={this.props.showList}
            id={singlePlay.id}
            key={singlePlay.id}
            name={singlePlay.name}
          />
        ))}
      </div>
    );
  }
}

export default PlaylistSpotify;

This is App.js, where once the error is fixed "showList" is supposed to receive the playlist id

import React from "react";

import SearchBar from "../SearchBar/SearchBar";
import SearchResults from "../SearchResults/SearchResults";
import Playlist from "../Playlist/Playlist";
import Spotify from "../../util/Spotify";
import PlaylistSpotify from "../PlaylistSpotify/PlaylistSpotify";

import "./App.css";

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      searchInput: "",
      searchResults: [],
      playlistName: "New Playlist",
      playlistTracks: [],
      localPlaylists: [],
    };

    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);
    this.getLocalPlaylists = this.getLocalPlaylists.bind(this);
  }

  addTrack(track) {
    let newPlaylist = this.state.playlistTracks;
    if (newPlaylist.find((playTrack) => playTrack.id === track.id)) {
      return;
    } else {
      newPlaylist.push(track);
    }
    this.setState({ playlistTracks: newPlaylist });
  }

  showList(playlist) {
    console.log(playlist);
  }

  removeTrack(track) {
    let playlist = this.state.playlistTracks;
    let newPlaylist = playlist.filter((playTrack) => playTrack.id !== track.id);
    this.setState({ playlistTracks: newPlaylist });
  }

  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: [],
      });
    });
  }

  // keep search after url updated

  componentDidMount() {
    Spotify.getAccessToken();
  }

  getLocalPlaylists() {
    Spotify.getPlaylist().then((playlistLists) => {
      let newList = playlistLists.items.map((playlist) => {
        return {
          name: playlist.name,
          id: playlist.id,
        };
      });
      this.setState({ localPlaylists: newList });
    });
  }

  search(term) {
    Spotify.search(term).then((searchResults) => {
      // filters results in order not to show tracks already in the playlist
      searchResults = searchResults.filter((track) => {
        return this.state.playlistTracks.every((el) => el.uri !== track.uri);
      });

      this.setState({ searchResults: searchResults, searchInput: term });
    });
  }

  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}
                showList={this.showList}
              />
            }
            {
              <PlaylistSpotify
                getLocalPlaylists={this.getLocalPlaylists}
                playlistLists={this.state.localPlaylists}
              />
            }
          </div>
        </div>
      </div>
    );
  }
}

export default App;

Thanks for your help!

Answer 1

You don't pass showList={this.showList} to PlaylistSpotify, so it is undefined when passing to SingleCurPlaylist and on.

<PlaylistSpotify
  getLocalPlaylists={this.getLocalPlaylists}
  playlistLists={this.state.localPlaylists}
  showList={this.showList}
/>

Answer 2

in PlayistSpotify.js file, in the playlistLists loop, this.props.showList is unedfined:

    {this.props.playlistLists.map((singlePlay) => (
      <SingleCurPlaylist
        showList={this.props.showList} // this is undefined
        id={singlePlay.id}
        key={singlePlay.id}
        name={singlePlay.name}
      />
    ))}

because you're not passing it from App.js:

{<PlaylistSpotify
   getLocalPlaylists={this.getLocalPlaylists}
   playlistLists={this.state.localPlaylists}
   //showList is not passed
 />
}