Jammming project- step 39- props won't render

I am working on the Jammming project (https://www.codecademy.com/paths/web-development/tracks/front-end-applications-with-react/modules/jammming/projects/jammming-prj) and everything is working fine until step 39. The playlist tracks I’ve hardcoded into the state of my app component are not rendering; however, I know the props are being passed (App > Playlist > Tracklist > Track) because I can see them in my dev tools when I view the Track components. I am further confused by this because the hardcode in App being passed to my SearchResults > TrackList > Track components are rendering just fine. I have compared my files to the tutorial video step by step and I cannot understand why my code does not produce the same results. I am unsure which part of my codes to paste here because I’m not sure which file is failing.
Thanks in advance for any help :slight_smile:

Since you’re seeing the props being passed to your Track components from both flows of data (searchResults and playlistTracks arrays) in your App’s state in the Dev Tools, but only the Search Results array is rendering, then I’d double check the property names being passed to the Track components are 100% the same

Thank you for your reply, it has been helpful. I have checked my prop names and they are consistent between components. I can now get my code to work by adding these lines to my Track component’s render method:

 <p>{this.props.track.playlistArtist} {this.props.track.playlistAlbum}</p>

However I did not see this added in the tutorial video; the programmer’s code renders both instances of Track without this addition. So I feel like I’m still missing something here?

I think there is a disconnect as well. The TrackList and Track components are supposed; to be generic enough that they work from Playlist or SearchResults. Your use of this.props.track.playlistName makes me wonder how the data is being flowed down to the components from each side.

Do you have your project posted on GitHub? If not, you can post the files here using a pre-formatted text block for each file

Only if you’d like more feedback, of course. You seem to have found a solution that works for you.

I am new to github, so if there are any issues, please let me know. Thanks again so much! :slight_smile:

Looks like it worked!

I also see where the disconnect is

    this.state = {
      searchResults: [
        {name: 'name1', artist: 'artist1', album: 'album1', id: 'id1'},
        {name: 'name2', artist: 'artist2', album: 'album2', id: 'id2'},
        {name: 'name3', artist: 'artist3', album: 'album3', id: 'id3'}],

      playlistName: 'My Playlist', 
      playlistTracks: [{playlistName: 'playlistName1', playlistArtist: 'playlistArtist1', playlistAlbum: 'playlistAlbum1', id: 'id4'},
                       {playlistName: 'playlistName2', playlistArtist: 'playlistArtist2', playlistAlbum: 'playlistAlbum2', id: 'id5'},
                       {playlistName: 'playlistName3', playlistArtist: 'playlistArtist3', playlistAlbum: 'playlistAlbum3', id: 'id6'}]

Both of these arrays should be in the same format with the same property names. Your playlistTracks array shouldn’t have objects with property names prefixed with playlist.

If you maintained the same property names for name, artist, album, and id, then as the data flows down to the other components, they never have to worry about handling a different set of names for the same type of data. It helps a lot with reusability of your components. Your Track component could go back to only having to know one set of property names.

In the screenshots I posted before, you can see that the Track component used the same format of data from SearchResults -> TrackList -> Track and from Playlist -> TrackList -> Track. It didn’t matter where it came from.

1 Like

Of course, you are right! It seems so simple and obvious now. Thank you so much for your time and help! :smiley:

1 Like

You’re welcome. Glad I could help