Jammming step 34 map function

Hi!
I’ve gotten up to step 34 and i’m stumped. I’ve put in the map function, but obviously forgotten something as it’s coming back undefined. it breaks on the browser. i get this on the local host:

TypeError: can’t access property “map”, this.props.tracks is undefined

render
src/components/TrackList/TrackList.js:9
6 | 7 | render() { 8 | return (> 9 |

| ^ 10 | { 11 | this.props.tracks.map(track => { 12 | return

here’s my code before and after i inserted the map function:

// Tracklist.js before (working)


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

class TrackList extends React.Component {

    render() {
        return (
            <div className="TrackList">
            
            </div>
        )
    }
}
export default TrackList;




// Tracklist.js after (broken)
 
import React from 'react';
import './TrackList.css';
import Track from '../Track/Track';

class TrackList extends React.Component {

    render() {
        return (
            <div className="TrackList">
            {
              this.props.tracks.map(track => {
                return <Track  track={track} key={track.id} />
            })
            }
            </div>
        )
    }
}
export default TrackList;





THANKS! :) 

Hello, you may not have missed anything yet. Your Playlist component is probably not sending anything to TrackList on the tracks property yet, so when TrackList tries to access this.props.tracks, it gets undefined, which doesn’t have a map() method.

Steps 36 through 39 are where you set up the passing of data from App to Playlist, etc. If you finish Step 39 and you’re still having this issue, then you need to look closely at the flow of data from App to both SearchResults and Playlist, and then from each of those components to TrackList

2 Likes

thanks! i went through to 39 and it’s still broken when i paste in the function… i got the function from the follow along video because my original one wasn’t working so i looked at the get help… following the get help and its still broken so i’m still stumped like the amazon rainforest

Start posting your files. App.js, SearchResults.js, Playlist.js, TrackList.js

If you published to GitHub, then you can share that link here. Otherwise, you can post them in individual pre-formatted blocks here

I bumbled upon a workaround that seems to un-break it at this step (#39). I wonder what, if any, side-effects it will have later on. the error message said this.props.tracks was undefined , so i added a tiny bit of logic in TrackList’s render to return null if this.props.tracks was false. yeay! :slight_smile:


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

class TrackList extends React.Component {

    render() {
        if(this.props.tracks){
    return (
        <div className="TrackList">
        {this.props.tracks.map(track => {
            return <Track track={track} key={track.id} /> })}
        </div>
    )} else {
        return null;
    }
    }
}

export default TrackList;

type or paste code here

Sounds good, that can work! Did you notice that either your Playlist or SeachResults weren’t showing your test data? If either of them are not showing the list of test tracks you created, then you know where the data flow issue is coming from.

An alternative to what you’ve done could be:

export class TrackList extends React.Component {
  render() {
    return (
      <div className="TrackList">
        {this.props.tracks && this.props.tracks.map(track => {
          // ...
        })}
      </div>
    );
  }
}

The extra this.props.tracks && prevents the .map() call from running if this.props.tracks isn’t defined. You’ll learn that shorthand syntax later in the lessons

2 Likes

your solution looks elegant AF, however my mind is still a bit iffy on the logical and operator !

Don’t worry, you’ll go over the logic behind how that works soon enough if you haven’t seen it before.

The “JSX and Conditional” section of Codecademy’s Learn React - JSX Cheatsheet also has notes about it you can use as a reference after you get through the lesson that covers it.

1 Like

the workaround didn’t solve my problem but i was able to see that the TrackList rendered by SearchResults has undefined for props.tracks. i thought it was receiving the props from this.props.SearchResults. whoops. it was actually this.props.searchResults. i wish there was a way to have that one stupid letter pointed out by the text editor!

1 Like

I feel you on that

Be sure to grab the React Developer Tools extension. It’s available on Chrome and Firefox. It can help with the debug process by letting you see the flow of data a bit easier (among other features)

Here’s a small sample of what it can do. Ignore the blurred part because it’s a screenshot I made to help someone troubleshoot their project previously and I didn’t want that information to distract:

1 Like

Had same trouble, found answer here. I didn’t done anything that not in this lesson, but had that error, not everyone have it?

Many thanks for mentioning this on here. It would be better if that was included in the instructions. For a newbie it can be very confusing at first. I didn’t realise at all that there was another tracks property coming from Playlist. I was stuck at looking at the tracks inside SearchResults.js. It worked in the end. :relaxed:
So from what I’ve understood the app stops working when one of the two separate track lists has an issue( in this case - missing a property tracks). Does that make sense?