Jamming project stuck on exercise 34

Had the exact same problem and spent close to 4-5 hours trying to figure this out. Thank you!

Also got stuck on this and spent way too long trying to figure it out. The part that caused the most grief was that the walk through video showed it working correctly at this step, which led me to think I had a typo somewhere.

1 Like

I was also stuck! Thank you for this.

Had the same annoying issue. I don’t know which step that problem came from. I’ll move on and we’ll see what happens but thank god I found this post because it was driving me crazy saying it compiled successfully yet browser showed an error. Thanks!

Hi bleier,
I was having the same problem than you and also got stuck in 39, my problem was that I had multiple state declarations in App.js, once I put playlistName and playlistTracks as properties of the same state object it worked fine, hope that helps a bit :slight_smile:

Thank you so much! I was stuck on this one too.

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?

Same question as @tagrunner79037!

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.