Jammming TypeError: Unable to solve

Hi! I am working on Jammming(I am on task 38). Immediately after I solved the error where the ‘map’ method was undefined, this error was thrown:

here is a second screenshot:

I cannot solve this error. Can anybody help me?

Thanks!

And also, here is the link to all my code for the project:

https://github.com/hypercode321/Jammming

Hi @hypercoder457,

I think the error could be due to setting up a Constructor and mapTracks method in your TrackList component (I don’t think those two are needed). It looks like your code is correct for .map. You could try moving it to the render method so it returns .map between the div tags. See example below. Hope this helps!

image

Cheers!

I did that(I copied your example). But now I have another Error:

This is my code from TrackList.js:

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;

Hmmm. I actually figured out that I had to REMOVE this.props from the this.props.tracks.map callback function BUT THIS ANNOYING ERROR STILL IS THROWN AGAIN:

This is Repost of code from TrackList.js:

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

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

export default TrackList;

Hey @hypercoder457 I might have found the issue. When you followed my example you received the error message because of TrackList /> in your playlist.js file. If you go into that file and comment out that line for the time being it should clear the error message.

You’ll eventually define tracks in TrackList /> in the playlist.js file. Hope this helps!

I removed the <TrackList /> component from Playlist.js But still same error is happening.

Sorry @hypercoder457 I thought I was going to be able to help! Were you able to figure out the solution?

Yes I was. Thanks @core2012045423

1 Like

How do you comment out?

To comment out, use a double forward slash

// This is a comment