Capstone project Jammming problem step 34

Hey guys,

I’m working on the React Jammming project and I have an issue on the step 34. When I use the .map() to acces the props and return this message “TypeError: Cannot read property ‘map’ of undefined”. I make sure the state from App.js was pass properly by inspecting the code ans it’s all good until I call the .map()…

Here is my code

App.js :


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

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;

and TrackList.js

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

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;

I don’t understand why I have this message saying “Cannot read property ‘map’ of undefined” so if anyone have the same issue or could help please

In advance thank you!

Ps: I even check the video to see where it could be wrong but still i can’t find it :sweat_smile: :exploding_head:

You can find the full code here : GitHub - Colinario/jammming

Hello,

Step 34 is problematic because it “breaks” the project for awhile, even if you followed the instructions. You’ll need to continue until Step 39 for everything to work again.

The reason for this is that the Playlist component also uses the TrackList component, but the track data isn’t being passed from App to Playlist to TrackList yet. Since the tracks prop isn’t being passed to TrackList from Playlist yet, your code tries to use map() on undefined.

I suggest continuing to Step 39 and only worrying about this specific error after that. In the next few steps, you’ll be passing the necessary data.

1 Like

Thank you for your help ! I’ll try that and see how it goes :+1:

Thank you for the solution!

I was having this issue as well, and the problem was rectified by working through Step 39. However, I spent close to three hours banging my head against the “map() undefined” problem before finding this solution.

Is it possible the instructions should include some kind of warning that the site is going to break? The walkthrough had no such issues, which led me to believe that I had made an error. It was tremendously frustrating and I have to assume the OP here and I are not the only people who’ve had this same issue.

Is there a place for submitting these sorts of problems?