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

2 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:

1 Like

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.