Hello,
Im trying to complete the Jammming project but i keep getting the error: this.props.track is undefined.
Ive checked through the forums and tried to see if anything related to mine and gone through my code and amended where the name “track” and “trakcs” may be mismatched but im still getting the same error?
Track.js file:
import React from “react”;
import { TrackList } from “…/TrackList/TrackList”;
import “./Track.css”;
export class Track extends React.Component {
constructor(props) {
super(props);
this.addTrack = this.addTrack.bind(this);
this.removeTrack = this.removeTrack.bind(this);
}
renderAction() {
if(this.props.isRemoval) {
return <button className="Track-action" onClick={this.removeTrack}>-</button>
} else {
return <button className="Track-Action">+</button>
}
}
addTrack() {
this.props.onAdd(this.props.track);
}
removeTrack() {
this.props.onRemove(this.props.track);
}
render() {
return (
<div className="Track">
|
*/}{this.props.track.name}
{this.props.track.artist} | {this.props.track.album}
TrackList.js File:
import React from “react”;
import { Track } from “…/Track/Track”;
import “./TrackList.css”;
export class TrackList extends React.Component {
render() {
return (
{/* */}
{this.props.track.map((song) => {
return
App.js file:
import React from “react”;
import ‘./App.css’;
import { SearchBar } from “…/SearchBar/SearchBar.js”;
import { SearchResults } from “…/SearchResults/SearchResults.js”;
import { Playlist } from “…/Playlist/Playlist.js”;
import { Spotify } from “…/util/Spotify”;
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
searchResults: [
{
name: “Example Track Name”,
artist: “Example Track Artist”,
album: “Example Track Album”,
id: 1,
},
{
name: “Example Track Name 2”,
artist: “Example Track Artist 2”,
album: “Example Track Album 2”,
id: 2,
},
],
playlistName: “Example Playlist”,
playlistTracks: [
{
name: “Example Playlist Track Name”,
artist: “Example Playlist Track Artist”,
album: “Example Playlist Track Album”,
id: 3,
},
{
name: “Example Playlist Track Name 4”,
artist: “Example Playlist Track Artist 4”,
album: “Example Playlist Track Album 4”,
id: 4,
},
],
};
this.addTrack = this.addTrack.bind(this);
this.removeTrack = this.removeTrack.bind(this);
this.updatePlaylistName = this.updatePlaylistName.bind(this);
this.savePlaylistName = this.savePlaylistName.bind(this);
this.search = this.search.bind(this);
}
addTrack(track) {
const foundTrack = this.state.playlistTracks.find(playlistTrack => playlistTrack.id === track.id);
const newTrack = this.state.playlistTracks.concat(track);
foundTrack ? console.log(“Track already exists”) : this.setState({playlistTracks: newTrack})
};
removeTrack(track) {
const isPresent = this.state.playlistTracks.filter(playlistTrack => playlistTrack.id !== track.id);
this.setState({ playlistTracks: isPresent });
}
updatePlaylistName(name) {
this.setState({ playlistName: name });
}
savePlaylistName() {
const trackURIs = this.state.playlistTracks.map((track) => track.uri);
const name = this.state.playlistName;
Spotify.savePlaylistName(name, trackURIs).then (() => {
this.setState({
playlistName: “New Playlist”,
playlistTracks: ,
})
})
}
search(term) {
Spotify(term).then
(result => {
this.setState({ searchResults: result});
console.log(term);
});
}
render() {
return (
Jammming
<div className="App-playlist">
{/* <!-- Add a SearchResults component --> */}
<SearchResults searchResults={this.state.searchResults}
onAdd={this.addTrack} />
{/* <!-- Add a Playlist component --> */}
<Playlist playlistName = {this.state.playlistName} playlistTrack={this.state.playlistTracks}
onRemove={this.removeTrack}
onNameChange={this.updatePlaylistName} />
onSave={this.savePlaylistName}
</div>
export default App;
Spotify.js file:
let accessToken = “”;
const clientID = “5d32e87fbccb4e75a6c78c61a9634e5f”;
// const redirectURI = “http://localhost:3000/”;
const redirectURI = “https://www.MyJammingProject.surge.sh”;
const Spotify = {
getAccessToken() {
if (accessToken) {
return accessToken;
}
const urlAccessToken = window.location.href.match(/access_token=( [^&])/);
const urlExpiresIn = window.location.href.match(/expires_in=( [^&])/);
if (urlAccessToken && urlExpiresIn) {
accessToken = urlAccessToken[1];
const expiresIn = Number(urlExpiresIn[1]);
window.setTimeout(() => (accessToken = “”), expiresIn * 1000);
window.history.pushState(“Access Token”, null, “/”);
} else {
const redirect = https://accounts.spotify.com/authorize?client_id=${CLIENT_ID}& response_type=token&scope=playlist-modify-public&redirect_uri=${redirect_URI}
window.location = redirect;
}
},
search(term) {
const accessToken = Spotify.getAccessToken();
console.log(accessToken);
return fetch(`https://api.spotify.com/v1/search?type=track&q=${term}`, {
headers: {Authorization:`Bearer${accessToken}`},
})
.then(response => {
return response.json();
})
.then((jsonResponse) => {
if(!jsonResponse.tracks) {
return [];
}
return jsonResponse.tracks.items.map(track => {
id: track.id;
name: track.name;
artist: track.artist[0].name;
album: track.album.name;
url: track.uri;
})
})
},
savePlaylistName(name, trackURIs) {
if (!name || !trackURIs) {
return;
}
let accessToken = Spotify.getAccessToken();
const headers = {Authorization:`Bearer${accessToken}` };
let userID = "";
return fetch("https://api.spotify.com/v1/me", { headers: headers })
.then((response) => response.json())
.then((jsonResponse) => {
userID=jsonResponse.id;
return fetch(`https://api.spotify.com/v1/users/${user_ID}/playlists`, {
headers: headers,
method: "POST",
body: JSON.stringify({ name: name }),
})
.then((response) => response.json())
.then(jsonResponse => {
const playlistID= jsonResponse.ID;
return fetch(`https://api.spotify.com/v1/playlists/${playlistID}/tracks`, {
headers: headers,
method: "POST",
body: JSON.stringify({ uris: trackURIs }),
}
);
});
});
},
};
export { Spotify };
PlayList File:
import React from “react”;
import { TrackList } from “…/TrackList/TrackList”;
import “./Playlist.css”;
export class Playlist extends React.Component {
constructor(props) {
super(props);
this.handleNameChange = this.handleNameChange.bind(this);
}
handleNameChange (event) {
this.props.onNameChange( event.target.value);
}
render() {
return(
<input defaultvalue={“New Playlist”} onChange={this.handleNameChange} />
{/* */}
<button className=“Playlist-save” onClick={ this.props.onSave}>
SAVE TO SPOTIFY
}
}
SearchResults File:
import React from “react”;
import { TrackList } from “…/TrackList/TrackList”;
import “./SearchResults.css”;
export class SearchResults extends React.Component {
render() {
return (
Results
{/* */}SearchBar File:
import React from “react”;
import “./SearchBar.css”;
export class SearchBar extends React.Component {
constructor(props) {
super(props);
this.state = {term: “”};
this.search = this.search.bind(this);
this.handleTermChange = this.handleTermChange.bind(this);
}
search() {
this.props.onSearch(this.state.term);
}
handleTermChange(e) {
this.setState({ term: e.target.value });
}
render() {
return (
<div className="SearchBar">
SEARCH
Any help appreciated i feel like im going round in circles, as I will change one and then a new error comes up then i fix that and then this same error comes back?
Thanks in advance
Susan