Jamming app turns blank when I add one line of code task 34

Hello! Thanks in advance for any help! I have an issue with the code in the Jammming project.
I have followed closely the video tutorial and it has gone fine until step 34 where I find making one change causes the react app to fail to render and only a white screen to show up, without any error messages to help me. I do not know why this is as I have carefully gone through to eliminate typos, stray semicolons etc and I have isolated it to a single line of code, namely:

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

in the TrackList component. Commenting this out shows the following in the app:

. As soon as I uncomment the line, I get simply a white screen.

I include the rest of my code below in case I have missed something.

App.js

import React from 'react';
import './App.css';
import SearchBar from '../SearchBar/SearchBar';
import SearchResults from '../SearchResults/SearchResults';
import Playlist from '../Playlist/Playlist';

class App extends React.Component{
  
  constructor(props){
    super(props); 
    this.state = {
      searchResults: [{ name: 'name1', artist: 'artist1', album: 'album1', id: 1 }, { name: 'name2', artist: 'artist2', album: 'album2', id: 2 }, { name: 'name3', artist: 'artist3', album: 'album3', id: 3 }] 
    }
  }

  render(){
    return (
      <div>
        <h1>Ja<span className="highlight">mmm</span>ing</h1>
        <div className="App">
          <SearchBar />
          <div className="App-playlist">
            <SearchResults searchResults={this.state.searchResults}/>
            <Playlist />
          </div>
        </div>
      </div>
    )
  }
}
export default App;

SearchResults.js

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


class SearchResults extends React.Component{
    render(){
        return (
            <div className="SearchResults">
                <h2>Results</h2>
                < TrackList tracks={this.props.searchResults} />
            </div>
        )
    }
}

export default SearchResults;

Track.js

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

class Track extends React.Component{

    renderAction(){
        if(this.props.isRemoval){
            <button className="Track-Action">-</button>
        }else {
            <button className="Track-Action">+</button>
        }
    }

    render(){
        return (
            <div className="Track">
                <div className="Track-information">
                        <h3>{this.props.track.name}</h3>
                        <p>{this.props.track.artist} | {this.props.track.album}</p>
                </div>
                    {this.renderAction()}
            </div>
        );
    }
}

export default Track;

TrackList.js

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

class TrackList extends React.Component{
    render(){
        return (
            <div className="TrackList">
                { 
                    **//THE LINE BELOW IS THE ONE THAT BREAKS EVERYTHING**
                    this.props.tracks.map(track => { return <Track track={track} key = {track.id} /> })                    
                }
            </div>
        )
    }
}

export default TrackList;

I also have other components like Playlist or SearchBar but they dont seem relevant here. Please let me know what I am missing. Thanks so much!

Hello!

If you press F12 to enter your browsers console I assume you’re receiving an error saying something along the lines of this.props.tracks being undefined, correct?

So this is a fairly common issue that pops up and it’s caused by the fact that you render the <TrackList/> component twice (in the SearchResults and in the Playlist, to be able to access the props like that, a set of valid props must be passed in every time it’s rendered.

Despite this, the lesson steps at that point only mention that you should pass props in via SearchResults (as you’ve done) however, it looks like you are not passing any props down via the Playlist. While that will be addressed in a few steps time, if you’d like to get rid of the error quicker (which is probably a good idea) you can pass down some mock data now :slight_smile:

2 Likes

Thank you so much for your response. When I went to Playlist and commented out the Tracklist there, it worked!
I did try passing in props to Playlist but evidently my understanding is still spotty and it didnt fix it so I will leave it commented out until we address it later in the process as you mentioned.

Edit 10 mins later - and yep got it to work as expected! You are a hero!

Thank you so much for your help!

1 Like

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.