Jamming project stuck on exercise 34

At the beginning, one of the first steps is to call the component instances in differents components., the same time you import those components.

Hello. Please can somebody help me. It still doesn’t work for me. Stuck in task 34.
TypeError: this.props.isRemoval is not a function
Here is my code:

import React from ‘react’;
import ‘./TrackList.css’;
import Track from ‘…/Track/Track’;
class TrackList extends React.Component {
render() {
return (


{
this.props.tracks.map(track => {
                  return <Track track={track}

                        key={track.id} />
              })
          }         
        </div>
    )
}

}
export default TrackList;

import React from ‘react’;
import ‘./Playlist.css’;
import TrackList from ‘…/TrackList/TrackList’;
class Playlist extends React.Component {
render() {
return (

<input defaultValue={“New Playlist”} />

SAVE TO SPOTIFY

)
}
}
export default Playlist;

import React from ‘react’;
import ‘./SearchResults.css’;
import TrackList from ‘…/TrackList/TrackList’;
class SearchResults extends React.Component {
render() {
return (


SearchResults




)
}
}
export default SearchResults;

Thank you so much. got stuck on this for a long.

But anyone please explain the specific reason that when remove the Tracklist on Playlist, it can render smootly?

1 Like

Same question as @tagrunner79037!

1 Like

Hello, just remove the Tracklist component from the time being and you will be able to add again later on the exercise when it is required. You will pass playListTracks as a prop to the trackless.

1 Like

Check this post for the next step of jamming
https://discuss.codecademy.com/t/feature-request-jammming/486290/2

As I understand because the when the component is calling the component it does not pass the tracks property.
So when you get the error message it does not mean that App -> SearchResults -> Playlist passing of your object is the problem but, that App also renders which in turns calls but you have not passed the searchResults Object from App -> Playlist -> Playlist.

2 Likes

I also have the same issue and I fixed it after I read your suggestion. Thank you for your solution!

Thanks for the solution @matthiasludwig ! I had the same issue as the original post and it makes perfect sense after reading your responses.

Cheers!

I think the solution and it works : is to check first that the array we pass to the map function is not null by adding a method ( renderMap) in the component TrackList :
class TrackList extends React.Component {

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

render() {

    return (
        
        <div className="TrackList">
        {this.renderMap()}
        </div>
    
    )
        
}

}

I think the solution and it works : is to check first that the array we pass to the map function is not null by adding a method ( renderMap) in the component TrackList :
class TrackList extends React.Component {

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

render() {

    return (
        
        <div className="TrackList">
        {this.renderMap()}
        </div>
    
    )
        
}

}

THANK YOU VERY MUCH !!! oh my god I’ve been struggling 3 days with this issue. Thank you and be safe <3

Thanks, I had the same problem. It solved the issue!!!

Yes. Paying attention to the video you see the guy comments out the TrackList / (the one in Playlist file) component because it will not work without any props. Btw I commented literally what the step said, so joke is on me.

@system9157688264 thanks you saved morning. I had the same issue. Thanks @ionatan to you as well. Cheers!

I had same issue, problem was that i pass props as playlistTracks={playlistTracks} where its should be tracks={playlistTracks}
and didnt had any more issues :slight_smile:

This was the solution for me! Thank you so much for sharing. It’s crazy that you can literally follow the “Get Unstuck” video line for line and not get yours to display in the browser while Rob’s did.

I also was stuck on 34 with the same error: map() …tracks is undefined.
go up till task 39, and you will get unstuck :partying_face:
TrackList is used in SearchResult.js and in Playlist.js, you need to define tracks in both (tracks gonna be different)
( or you can delete <Playlist /> from App.js to test you code, then add it back )
Hope it will help
Happy coding:)

it really helps bro <3

I got stuck on this one for a while too, so I went back to exercise 33 and saw in devTools that tracks wasn’t defined. Turns out the problem with mine was that I wasn’t being consistent with my capitalization of searchResults. It’s used a lot so it’s difficult to keep track of. Hope this helps!

1 Like