Problem with Jammming <tracklist/> component mapping <track/> since step 35

Get Help React.js
#1

Hi! my native languaje is spanish but i will try to explain my problem in english :sweat_smile:

since 35 step of Jammming
(https://www.codecademy.com/paths/web-development/tracks/front-end-applications-with-react/modules/jammming/projects/jammming-prj)

when i have to use a .map() method in component to make an array of , my browset get blank! :cold_sweat:

if i comment this code line, all other code works!

im going to post some images and let you my Github repository (is very similar, but not enterily the same because i didnt go for video tutorial until i got this problem, and i culdnt resolve it!)

image
image945×483 24.1 KB

working on if i comment this code

image
image1206×594 42.5 KB

blank if i uncomment:

image
image1093×423 13.9 KB

my get repository whit all my code

that component code :cold_sweat:
export class TrackList extends React.Component {

render() {
return (

  <div className="TrackList">
           
      
    
    
    { this.props.tracks.map(track => {
                
                    return  <Track key= {track.key} track={track} onAdd = {this.props.onAdd} onRemove = {this.props.onRemove} isRemoval = {this.props.isRemoval}/>
                }) } 
                    
               
                                        
           

                   
  </div> 
        
                  
        )
              
        }
             
        }
#2

Hello, welcome to the forums! :wave:

If you take a look into the browser’s dev console you should see an error that goes something along the lines of "this.props.tracks being undefined". What it’s saying is that one of the two places you are rendering the <TrackList/> component (I think the error specifically is where it’s rendering the playlist TrackList if I recall correctly) do not have any given props, so attempting to map over this.props.tracks isn’t possible.

At this point in Jammming, that’s perfectly normal and it will be addressed in the next couple steps or so when the correct values for props will be passed into the component.

Happy coding!

#3

Good try! y tryed to pass the props in the component, but it still doesnt work .
image

im not good at reading the console, but this is the error.

image
image1349×178 10.7 KB

I beg you for help :sweat_smile:

#4

here is marking the problem but i dont know what to do

image
image915×361 15.1 KB

image

#5

Hello!

That error is telling is that at some point this.props.tracks is undefined which would likely mean one of two things:

  • Somewhere, you are rendering that component, but not passing the required props in. Since there is two different places in Jammming where <TrackList /> is rendered, double check that both are correct and have the required props.
  • There may be a typo somewhere where you are passing the props (Also I’m not sure if prop names are case sensitive or not, I don’t think so but it may be worth trying tracks instead of Tracks in case.

As a debugging check, try console.logging the value of this.props at different points in the code to make sure everything has the value you’re expecting (and to find where it doesn’t)

Happy coding! :slight_smile:

#6

I’m having the same issue right now!

I’m passing a hard-coded array of track objects in App.js for the moment, as I don’t have the API set up yet:

this.state = { // Temporary hard-coded values
      searchResults: [
        {name: 'Baby I Love You', artist: 'Aretha Franklin', album: 'Aretha Arrives', id: '0'},
        {name: '(You Make Me Feel Like) A Natural Woman', artist: 'Aretha Franklin', album: 'Lady Soul', id: '1'},
        {name: 'Respect', artist: 'Aretha Franklin', album: 'Respect', id: '2'}
      ]
    }

I was getting TypeError: Cannot read properties of undefined (reading '0') as en error from the TrackList component, so I’m trying accessing the value outside of the JSX:

export class TrackList extends React.Component {
  render() {
    console.log(this.props.tracks[0].name); // Prints: 'Baby I Love You'
    return (
      <div className="TrackList">
        <p>{this.props.tracks[0].name}</p>
      </div>
    )
  }
}

The console.log() is correctly logging ‘Baby I Love You’ to the console, but the this.props.tracks[0].name is creating the same TypeError and whitescreening the whole app.

Clearly .tracks[0] isn’t undefined, or it wouldn’t be possible to log its value to the console?

If anyone can help, that would be much appreciated! (And I’ll post here again if I find the solution somewhere else.)

#7

Well I solved my own problem…

The issue turned out to be that <Track List /> is rendered twice in the app, and I was passing my test-data object as props to one but not the other.

Hope that helps, @agustinlevental31284

1 Like
#8

Thanks! i could resolve it ! my problem was that y was sending the tracks prop to tracklist like “this.props.SearchResults” , and the correct way was like {this.props.TRACKS} , so the track component could find the props. thanks! … double check how to pass props in the two places where you render

1 Like