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


#1

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


#2

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:


#3

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!


#4

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.


#5

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