Jammming Project (Save to Playlist Error)

TypeError: util_Spotify__WEBPACK_IMPORTED_MODULE_5_.default.savePlaylist is not a function

App.savePlaylist

C:/Users/eunic/jammming/src/Components/App/App.js:46

  43 |   44 | savePlaylist (){  45 |   const trackUris =this.state.playlistTracks.map(track => track.uri);> 46 |   Spotify.savePlaylist(this.state.playlistName, trackUris).then(() => {     | ^  47 |     this.setState({  48 |       playlistName: 'New Playlist',  49 |       playlistTracks: []

Please help.

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: [] }) }) console.log(this.savePlaylist); } 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;

Hi @tag7701147543
you just posted the code of your App file here. Is there a method ‘savePlaylist’ in your Spotify.js with exactly the same spelling/camel cases?

1 Like

Wow! There was a spelling mistake with ‘savePlaylist’ in my Sportify.js, specifically with the camel casing.

I resolved it thanks to you.

I really appreciate.

1 Like