Jamming Capstone Project Ex 34 - Help

Hello I am struggling to find the error within my code for exercise 34 of the capstone project.
It keeps telling my tracks.map is undefined

import React from ‘react’;

import ‘./TrackList.css’;

import Track from ‘…/Track/Track.js’;

class TrackList extends React.Component {

render(){

    console.log(this.props.tracks);

    return(

        <div className="TrackList">

            {

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

                   return (

                       <Track track={track} key={track.id} />

                   )

               }) 

            }

        </div>

    );

}

}

export default TrackList;

This is my code for the Tracklist file.
On the dev console I get an error that looks like this.

Any sort of feed back would be much appreciated.
Thank you for your time.

Never mind I found a solution to the issue if anyone is looking around for also a similar problem I recommend looking at this post. TypeError: Cannot read property 'map' of undefined

Could you elaborate on what you found in this post that resolved the issue. I’m not quite following what exactly the solution was in there.

1 Like

Oh drats - I think several of us ended up with tunnel vision. But just so it is as explicit if someone else hits this post, check all of your components and find every instance of TrackList. Ask yourself if each instance has what it needs or if it will actually lose the data along the way.

1 Like

No worries the solution was that there was another Tracklist Component in another file which was also being called by tracks, so in that component no tracks was being passed so the function from that component was being called undefined which led to the .map undefined error.