Need help understanding TypeError: this.props.tracks is undefined

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.

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}
                          isRemoval={this.props.isRemoval}
                          onRemove={this.props.onRemove} />
          })
        }
      </div>
    );
  }
}

export default TrackList;
1 Like

When you are using the TrackList component you are not passing in tracks, something like this:

<TrackList tracks= {[a, b]} />

You will also need to add onAdd, isRemoval and onRemoval.

Hello, @digitalplayer58973.

Welcome to the forums.

This code looks fine. You might double check your app.js file, or post the code.

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.

class TrackList extends React.Component {
    constructor(props) {
        super(props);
        this.mapTracks = this.mapTracks.bind(this);
    }

    mapTracks() {
        this.props.tracks.map(track => {
            return <Track track={track} key={track.id} />
        });
    }

    render() {
        return(
            <div className="TrackList">
                {this.mapTracks()}
            </div>
        )
    }
}

If anyone had that experience or knows about how binding the method would work, I’d be grateful to hear!

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?

Hey!

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: :slight_smile:

Happy coding!

Hello again,

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.

class SearchResults extends React.Component {
    constructor(){
    super();
    this.state = {
     tracks: []
    }
  }

componentDidUpdate(newProps){
  if(newProps.searchResults){
   this.setState({
     tracks: newProps.searchResults
    });
   }
 }

render() {

    return (
        <div className="SearchResults">
            <h2>Results</h2>

            <TrackList isRemoval={this.props.isRemoval} onAdd={this.props.onAdd}
                       tracks={this.state.tracks}/>
        </div>
    )
 }

}

I wouldn’t have been able to figure it out without this stackoverflow post and the reply from Imran: javascript - When Passing props through 2 components I loose the ability to use .map on the array - Stack Overflow

Update
This didn’t actually work in the end, I managed to get it working but I have absolutely no idea what I did!

tldr: Don’t do this fix, it won’t work!

1 Like

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”.