Jamming project step 34 error with this.props.tracks on trackList.js file

I’m getting : “TypeError: this.props.tracks is undefined” even thought console logging the track props from SearchResults.js is returning the correct data apparently. Could someone be so kind of letting me know where the bug is? It’s been days I’ve been trying and I don’t want to give up and leave it unfinished. I’m a bit further down in the tasklist because I thought maybe some of the steps ahead in the tasklist would make it all work. The structuring on this project is quite confusing tbh…

Hello, don’t get discouraged. This can be a tough project and this particular error is more difficult to debug because you have 2 components using TrackList.

The issue might not be with SearchResults.js or TrackList.js. Your Playlist.js component also uses the TrackList.js component, but it’s currently passing the tracks in on the playlistTracks prop rather than tracks, which means tracks is undefined when used from that component.

1 Like

Thanks for the reply. Still I don’t understand this issue you mention. Is it returning undefined because the this.state.searchResults is currently not populated with any tracks? Because I tried to hard-code tracks in the array and it still was returning undefined. I don’t understand when it will stop showing this error and I don’t like to be working on the tasks further ahead while my app is simply showing an error. I can’t see how I progress. What should I do?

The immediate issue of TypeError: this.props.tracks is undefined is being caused by the tracks prop not being sent to TrackList when used from Playlist. It’s currently being sent properly by SearchResults.

Here are some snippets:

Snippet from SearchResults.js

<TrackList onAdd={this.props.onAdd} isRemoval={false} tracks={this.props.searchResults} />

Snippet from Playlist.js

<TrackList onRemove={this.props.onRemove} isRemoval={true} playlistTracks={this.props.playlistTracks} />

Notice that both of these components use your TrackList component by passing it props. However, your TrackList component is only working with SearchResults.js because TrackList is expecting the tracks prop.

Snippet from TrackList.js

this.props.tracks.map(track => {
           ...
          })

The map is being run on the tracks prop, but from Playlist.js you are sending it in as playlistTracks. You can go back to your Playlist.js file and update the name you use so it is also tracks.

Here is what that would look like if this wasn't clear
<TrackList onRemove={this.props.onRemove} isRemoval={true} tracks={this.props.playlistTracks} />

By renaming it to tracks, TrackList now has access to it in it’s code as this.props.tracks so it will no longer be undefined and map will work.

The flow of data from App.js down to the other components through props is an important concept. This will at least get you to the next step so you can continue working on and debugging your project. You’ll notice more things you need to work on, but at least it won’t be a full error page.

One immediate thing you will need is some better sample data in App.js because the code you have right now isn’t going to give a proper object to test with.

Snippet from now

      searchResults: [
        { name: null },
        { artist: null },
        { album: null },
        { id: null },
      ],

You have an array of objects with individual properties, but they wanted you to create an array of objects, each object having those properties.

Sample if you need it
      searchResults: [
        {
          name: 'Track Name1',
          artist: 'Artist Name1',
          album: 'Album Name1',
          id: 'ID1'
        },
        {
          name: 'Track Name2',
          artist: 'Artist Name2',
          album: 'Album Name2',
          id: 'ID2'
        }
      ],
3 Likes

Thanks so much again, that was like the most helpful response ever. I will work on it tomorrow and I’m sure I’ll be able to start progressing on the project again with this knowledge. :smiley:

Just let me ask you one final thing(just if you feel like it, you’ve helped me more than enough already), did I miss something in the task list explanation in order to get this bug or is it supposed to be like this that I’d get an error until further down the tasklist? because as far as I can understand I was instructed to name props in the way I did. (also the null values on the SearchResults state I added them while trying to find a solution to the bug but initially I did it just as the course indicated). Also I’ve seen many posts from other people getting the same error and saying it’s due to bad structuring in the tasks order.

Anyway just let me thank you again for everything. Codecademy should have tutors like you helping users for an extra fee or something, it’d be really helpful.

2 Likes

I’m really happy to hear that this was helpful! :slight_smile: Thank you for your kind words. Honestly, I’d love that type of position.

As for your question about whether you missed something along the way in order to cause this bug, the step to pass the tracks from Playlist to your TrackList component doesn’t occur until Step 39. From Steps 36 to 39 are where the data is being passed through props from App to Playlist to TrackList. Even then, specific names are not always given unless you look at the hint for some steps, but they were more explicit with what they wanted it to be named in the steps for SearchResults.js.

I’ve found that sometimes in the more complex projects, one step may end up “breaking” the project for a few steps. When this happens, what I often do is continue on through the steps without checking them off until after it’s working again. If it’s been a certain number of steps or it seems they are going into another section, then I’ll go back and revisit the ones I still haven’t checked off to see if I missed something.

Another thing I’m in the habit of doing, even if I didn’t get stuck on any of the steps and I’m done the exercise, is going back and reading the hints afterwards. Sometimes there is more than just code and/or suggested variable names in them and that extra info can help reinforce a concept or make the reasoning behind a certain step clearer. I’d only suggest doing that after you’re done the exercise or if you’re really stuck on something.

3 Likes

Great advice again, you’re super helpful. If codecademy ever implements a tutoring system like I mentioned I’ll definitely make sure to recommend you for the position, you clearly have the perfect talent for it. And I truly think they SHOULD do it (And I’m not the only one).

Btw I also try not to check the hints until the end but in this one I was going insane. I get really nervous when the app breaks and i have to continue going forward blind waiting for it to fix itself.

1 Like