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;

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!