TypeError: Cannot read property 'map' of undefined

[jjarey]

I’m working on Jammming project but I got stuck on step 34:

“In the TrackList component, use the .map() method to render each track in the tracks property.”

https://www.codecademy.com/paths/web-development/tracks/front-end-applications-with-react/modules/jammming/projects/jammming-prj

This is my code:

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} />
          })
        }
      </div>
    )
  }
}

export default TrackList;

And this is what I get:

I just can’t figure out what I’m missing here. Maybe someone can help me out.

[janneslohmeijer]

I haven’t done this course yet, shoot me if I am wrong. But shouldn’t it be:

<div class="TrackList">

This is the proper syntax in HTML.

[jjarey]

Hi,

Thanks for your response. I don’t think that’s the issue. It’s seems to be pretty common to use ClassName properties in React. Please take a look:

Styling and CSS – React

However, I think the issue has something to with this:

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

If I erase that code the app renders OK. First I thought that I cannot access the tracks Array properly in this scope, but if I look into this via browser’s dev-tools, I can see that the TrackList component has the property called tracks, and the Array holds three objects as expected.

[mtf]

That is JSX which uses JS syntax for things like className.

[ionatan]

Do you have a runnable version of your project that produces this error?
A git repository or (even though a bit silly, it works) a zip file.
(whenever you ask about something it’s a whole lot better if others are able to look at that something instead of having to speculate about it, even more so if they’re not familiar with it because they may be able to figure it out when it’s in front of them but otherwise have no idea what’s going on)

Otherwise this all turns into a guessing game and a whole lot of work creating a project that might or might not match yours.

But yeah, your error is very much suggesting that this.props.tracks does not exist, so, did it get set (who’s responsibility is it to set it?) and is that the location where it should be?

Also worth considering is what a minimal version of passing information to a component looks like. Does that match what you’re doing? Presumably that’s something one could find in a tutorial and then one could adapt it and likely find the difference in that process.

[jjarey]

Hi,

Thanks for your response. I uploaded the project files here: https://drive.google.com/open?id=13EW0B7OzUAVzf4hNM5k8PNpiSN636g7m

[ionatan]

Your screenshot is not at the time that the error happens, is it?
What your screenshot shows does happen. But TrackList is used another time as well.

An easy way to show this is by printing each time TrackList is invoked (from inside TrackList’s render function)

There’s also a stack trace of the components (parents) written to console.

[jjarey]

Yes, I think I got it now. The problem is not the TrackList component itself, neither the SearchResults component. I just can’t map tracks property somewhere where it is not defined. I need to test this first, but probably I just couldn’t see the forest from the trees…