Jamming project -Uncaught TypeError: this.props.tracks is undefined

Projects
1

Whenever i use search button i get a white screen and i get an error:

Uncaught TypeError: this.props.tracks is undefined render Tracklist.js:8.

I have checked it multiple times and everything seems to be in order. Can somebody help me?

Tracklist.js

import React from "react";
import './TrackList.css'
import Track from "../Track/Track";

class TrackList extends React.Component{
    render(){
        return(
        <div className="TrackList">
            {
                this.props.tracks.map(track =>{
                    return <Track track={track}
                    key={track.id} onAdd={this.props.onAdd} onRemove={this.props.onRemove} isRemoval={this.props.isRemoval} />
                })
            }
        </div>
        )
    }
};

export default TrackList;

Search results.js

import React from "react";
import TrackList from "../TrackList/TrackList";
import './SearchResults.css'


class SearchResults extends React.Component{
    render(){
      return(
      <div className="SearchResults">
        <h2>Results</h2>
        <TrackList tracks={this.props.searchResults} onAdd={this.props.onAdd} isRemoval={false} />
      </div>
      )
    }
};

export default SearchResults;

app.js

import React from 'react'
import ReactDOM from 'react-dom';
import SearchBar from '../SearchBar/SearchBar';
import SearchResults from '../SearchResults/SearchResults'
import Playlist from "../Playlist/Playlist";
import './App.css';
import Spotify from '../../util/Spotify';

class App extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      searchResults: [],
      playlistName: 'New Playlist - click to change the name ',
      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){
    if (this.state.playlistTracks.find(savedTrack => savedTrack.id === track.id)) {
      return;
    } else {
      this.state.playlistTracks.push(track)
    }
    this.setState({playlistTracks: this.state.playlistTracks})
  }

  removeTrack(track){
    this.state.playlistTracks = this.state.playlistTracks.filter(removedTrack => removedTrack.id !== track.id)
  
    this.setState({playlistTracks : this.state.playlistTracks})
  }

  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 - click to change the name ',
        playlistTracks: []
      })
    })
  }

  search(searchItem){
    Spotify.search(searchItem).then(searchResults => {
      this.setState({searchResults: searchResults})
    })
  }

  render(){
    return(
      <div>
        <h1>Ja<span className="highlight">mmm</span>ing</h1>
        <div class="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;
2

Can you post the Spotify.search code? Or a link to your repository?

3

Assuming you’re on step 35 or thereabouts, then that is completely normal, just keep going and it’ll sort itself out :slight_smile:

It’s caused by the fact that you’re not passing props into the where TrackList is rendered in the Playlist component yet, so there you’re trying to iterate over nonexistent props.

1 Like
4

here it is

5

the issue is that ive finished the project and it doesn’t work unfortunately and I have no idea why

6

commit messages sometimes say how many steps ive done but it doesnt matter. they are just old and the project is done to the last step

7

The issue is in your Spotify.js file. You don’t return the mapped object to App.js. I didn’t dig in to why your code appears to be passing an object to the search call, resulting in strange search results. But it is now connecting and populating with that single return!

.then((jsonResponse) => {
        if (!jsonResponse.tracks) {
          return [];
        } else {
        return jsonResponse.tracks.items.map((track) => { //add the return statement shown here
            return {
              id: track.id,
              name: track.name,
              artist: track.artists[0].name,
              album: track.album.name,
              uri: track.uri,
            };
          });
        }
      });
1 Like
8

Thank You! It is working now. You have no idea how much time ive spent looking for an error but i wouldnt have thought that it was this.

1 Like