Hello, I am working on Jamming Project. I have it set up and should be running by now, except I get the error listed above.
The big issue is I kind of got stuck and mimicked TrackList from the source code, so i am not understanding why TrackList would be throwing an error. Because of this I feel like maybe there is an error in another file that feeds into TrackList, besides Track because is also source code, but I do not understand what data TrackList could be getting because I can’t even get the webpage to pull up before this error is thrown.
Any advice would be greatly appreciated, and maybe if someone could go into more detail what TrackList is actually doing. I am decent in javaScript but just started working with frameworks about a month ago so this is both new and not new.
First, sorry about my username. I missed to change that.
I have the same problem, but as it seems earlier in the project. I did the project twice until this point and followed the video instruction every time, only leading to this error again.
I figured that it might have something to do with binding a method which seems to be crucial in JSX. Sorry, I’m quite a newbie still.
I am having this exact same problem, I keep getting errors saying this.props.tracks is not defined. It seems like it had something to do with passing props from app to playlist and then from playlist to tracklist. Has anyone else had this problem and solved it?
The most common cause I’ve seen for this error is that TrackList is rendered in two places, in the SearchResults and in the Playlist, however the instructions for the project only mention the former, so people often do not pass valid props into the second. Valid props need to be passed in every time the component is rendered. Double check that you’ve got valid props passed in (some made up example track will do fine) to both time it’s rendered.
If that doesn’t work or isn’t the case for you then please share the relevant JS files, formatting according to this:
I thought your answer had fixed it but it turns out it just pushed the error further down the road. I didn’t figure it out until just now. It turns our the SearchResults component couldn’t pass it’s props down to TrackList because it didn’t have a state and those props weren’t assigned to the state, that’s why TrackList only threw errors when I searched and not when it was displayed.
Go to your SearchResults.js file and make sure the prop track you are passing to TrackList is equal to {this.props.searchResults AND NOT {this.props.SearchResults} this was my issue when dealing with “TypeError: this.props.tracks is undefined”.
hello , first i was stuck at SearchResult Component wasnt passing props to TrackList component it was telling me props undefined .but then i found that adding a constructor inside searchresult component solved it ,but then i have the issue of using the map function on Track component it is giving me this.props.tracks is undefined.