Jammming TypeError: Cannot Read Property map() of undefined

Hi Everyone!

I am on the Jammming Project & I am encountering this TypeError all the time, no matter how many times I try to solve it:

This is all my code from 3 files:

TrackList.js:

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;

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: [],
      tracks: []
    }
  }
  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} tracks={this.state.tracks}/>
              <Playlist playlist={this.state.searchResults} tracks={this.state.tracks}/>
            </div>
          </div>
      </div>
    )
  }
  
}

export default App;

Track.js:

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

class Track extends React.Component {
    renderAction() {
        if(this.props.isRemoval === true) {
            return <button className="Track-action">-</button>
        } else {
            return <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;

Any help would be appreciated.
Thanks!

1 Like

Hello!

I am also having the same issue. When I check the React Components tab on the dev tools, it states that ‘tracks’ is a defined prop:

However when I log the value

class Tracklist extends React.Component {

    render() {
        return (
            <div className="TrackList">
                
                {console.log(this.props.tracks)}
            </div>
        )

    }
}

It first acknowledges the props, then renders again and determines them undefined.

image

Are you seeing a similar issue?

Never mind @khronar I solved the error, but I don’t exactly remember how I solved it. It might work for you if you comment out the <TrackList /> component is Playlist.js

5 Likes

I literally just solved it that way! Thanks!

1 Like

You’re welcome @khronar

1 Like

I see you found a solution to your problem, I’d just like to add some context to how I fixed the problem.

For some reason when you have more than one instance of a component being rendered and one of those components doesn’t pass any props or state, it will confuse any functions on that component that does have a prop.
For example you’re passing the an array from App to TrackList but Playlist was also passing no props to TrackList therefore confusing it. Hopefully this helps :slight_smile:

2 Likes

You are right @jckofc

2 Likes

Thank you! I understand the problem now, but why does this happen? Shouldn’t there be a way to avoid this?

1 Like

Hi @bernardoquina. I don’t exactly know how this happened, maybe because the <TrackList /> components were conflicting with each other(props on one & no props on the other.)

3 Likes

That was the problem!!!

comment out the component in Playlist.js.

You have literally ended my mental breakdown as I was not even able to get ahold of any solution, thanks!

Heym thanks for the detailed answer, I will keep that in mind!

Hello, how did you think of commenting out in the first place? I’ve been trying to solve the issue for three days and finally started looking for help when I saw your solution but in real life, I wonder where I could have found help…

Hi @yezijin I got it from another of my forum posts, see Jammming TypeError: Unable to solve

@core2012045423 mentioned this

Thanks. I found my error and my code is working now. I’ve been struggling for days. When I reached the map function making step, I had that bug the first time, I checked everything in vain. I decided to restart the project from scratch which I did and then I had that error again at the exact same step. And then yesterday after staring at that piece of code for hours, I realized I had written this.props.playlisTracks instead of this.props.playlistTracks … And the only error I got was about map() not being able to read property of undefined… When I do Java in IntelliJ, such errors are immediately underlined. VS Code is good but it didn’t underline that to say there was something wrong there. It’s not the first time an entire thing stops working because of a typo but the error is not about that. Anyway, thanks for the advice and at least when others see my message, they will know that if they get this error they should check for typos.

I know, VS Code had that feature but now it’s gone… I have no idea why?!? :rage:

1 Like

You’re an absolute hero.

Thank you very much. I’ve struggled for 2 days and I had a feeling that something funky was happening beyond my comprehension. Another work around was to check if this.props.tracks was truthy and then assign this to a variable:
let variable = ‘’; /* Somewhere before the class definition */

if (this.props.tracks){
variable = this.props.tracks.map(track => {
return (

)
})"
}
and use the variable and use that variable in the return of the render.
return{


{variable}

}