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

I am stuck at task 34 of this project, the Error is given as “TypeError: Cannot read property ‘map’ of undefined”
I am attaching my written code and the code displayed on Chrome!

My written 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;

Error on Chrome -

Hello,

Sometimes in the projects, a certain step can “break” the output for a bit while things are being adjusted. On Step 34, you’re being told to use map() so it means that this.props.tracks must be an array, even if it’s an empty array. However, steps 36 through 39 are what is rigging up the Playlist component to receive information from App, and then sending it to TrackList on the tracks property. Until this is done, you may be getting an error.

You can either continue on and only go into full troubleshooting mode if you can’t get it working by Step 39, or you can introduce more checks in TrackList to make sure that this.props.tracks isn’t undefined before trying to use map() on it.

1 Like

Thank you for solution it worked and I found my mistake i had declared the TrackList component in the render method of Playlist.js file which was causing the issue for breaking of the website.