Jamming project Uncaught TypeError: Cannot read properties of undefined (reading 'map')

Language Help React.js
,
1

Practice Project: Jammming | Codecademy

Everything was going fine but once I got to step 34 which I have to add a .map(), the console gives me the following error Uncaught TypeError: Cannot read properties of undefined (reading ‘map’). I tried following the 15mins prior to this step of the walkthrough video and I didn’t have to change much, I had the classes exported my doing “export class…” now I removed that and added “export default name” at the end of the js because thats how the walkthrough was doing it, still nothing, if someone can help me.

App.js ;

[codebyte language=javascript]
import React from "react";
import { ReactDOM } from "react";
import './Track.css';


class Track extends React.Component {
    renderAction() {
        if (this.props.isRemoval === true) {
            return <button className="Track-action">-</button>
        } else {
            return <button className="Track-action">+</button>
        }
    }
    render() {
        return(
            <div className="Track">
            <div className="Track-information">
                <h3>track name will go here</h3>
                <p> track artist will go here \ track album will go here</p>
            </div>
            {this.renderAction()}
            </div>
        )
    }
}

export default Track;

[/codebyte]


SearchResults.js:
[codebyte language=javascript]

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


class Track extends React.Component {
    renderAction() {
        if (this.props.isRemoval === true) {
            return <button className="Track-action">-</button>
        } else {
            return <button className="Track-action">+</button>
        }
    }
    render() {
        return(
            <div className="Track">
            <div className="Track-information">
                <h3>track name will go here</h3>
                <p> track artist will go here \ track album will go here</p>
            </div>
            {this.renderAction()}
            </div>
        )
    }
}

export default Track;

[/codebyte]

TrackList.js:
[codebyte language=javascript]

import React from “react”;
import ReactDOM from “react”;
import ‘./SearchBar.css’;

class SearchBar extends React.Component {
render() {
return (



SEARCH

)
}
}

export default SearchBar;

[/codebyte]



Track.js:
[codebyte language=javascript]

import React from “react”;
import { ReactDOM } from “react”;
import ‘./Track.css’;

class Track extends React.Component {
renderAction() {
if (this.props.isRemoval === true) {
return -
} else {
return +
}
}
render() {
return(



track name will go here


track artist will go here \ track album will go here



{this.renderAction()}

)
}
}

export default Track;

[/codebyte]
2

Step 34 states:

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

So the error occurs in the TrackList component – not the Track component that you posted here.

The Tracklist component is rendered twice:

  1. In the PlayList Component
  2. In the SearchResults Component

Do you pass the tracks to both rendered TrackList components?

Please do always format your code: https://discuss.codecademy.com/t/how-do-i-format-code-in-my-posts/28351

3

Yes, I’m sorry, I did port the TrackList.js but formatted it incorrectly.

import React from "react";
import { ReactDOM } 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 tracks={track}
                            key={track.id} />}) 
                }
            </div>
        )
    }
}

export default TrackList;

Here is the track list correctly formatted.

4

As you said the Tracklist component was rendered twice and therefore the error. I have been able to fix it, I guess the frustration before didn`t let me see it. Thank you for your help.

1 Like
5

Hello ! I have the same problem and I don’t understand the answer… What is the solution ?
I’ve been on this issue for 2 days.

6

Go check Playlist.js and comment the line that calls the component.