Jammming - TypeError: Cannot read property 'map' of undefined

https://www.codecademy.com/courses/jammming/projects/jammming-prj?program_content_id=99de9e14fd731714946353537565b0fb&program_id=03b329471a3e6463699ebacbc60c3d47

import React from 'react';

import './TrackList.css';
import Track from '../Track/Track';

class TrackList extends React.Component{
  render(){
    return(
      <div className="TrackList">
      {console.log(this.props.tracks)}
      </div>
    );
  }
}

export default TrackList;

gives me two console logs the second one is undefined and I can not map over this.props.tracks because of that.

Please give me any suggestions to resolve this.

Thanks

I assume you’re trying to complete steps 29-35. I’ve got as far as step 34 and this is the code I have for Tracklist.js:

import React from 'react';
import './TrackList.css';
import { Track } from '../Track/Track';

export class TrackList extends React.Component {
  render() {
    return (
      <div className="TrackList">
        this.props.tracks.map(track => {
          <Track track={this.props.track} key={track.id} />
        })
      </div>
    );
  }
}

Unfortunately, this returns the following error:

Failed to compile
./src/Components/TrackList/TrackList.js
Line 10: ‘track’ is not defined no-undef

If and when I figure this assessment out, I’ll post the solution here. It will be appreciated if you can do the same should you beat me to it :wink:

So I got to the bottom of this. My code is as follows:

import React from 'react';
import './TrackList.css';
import { Track } from '../Track/Track';

export class TrackList extends React.Component {
  render() {
    return (
      <div className="TrackList">
        {this.props.tracks.map(track => <Track track={track} key={track.id}/>)}
      </div>
    );
  }
}

Turns out I needed { } surrounding all of the code in the TrackList div. I also didn’t need ‘this.props’ prepended to ‘track’, as I wasn’t receiving this information from another component, but rather declaring it inside of the .map() method.

A small fix for a lot of head scratching!

2 Likes

The reason my app was getting the error was because TrackList is called in SearchResults and Playlist but had not been defined yet for Playlist.

13 Likes

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.