Stuck on Step 34 in the Jamming Project

Web Development Full-Stack
1

Hey everyone. I am having issues with step 34 of the Jammming project. I keep on getting the following error: Cannot read properties of undefined (reading ‘map’)
TypeError: Cannot read properties of undefined (reading ‘map’).
I have tried everything, read multiple forums with many different solutions but no luck. Here is my Tracklist code with the map function method:
import React from “react”;
import styles from “./Tracklist.module.css”;
import Track from “../Track/Track”;

function Tracklist(props) {
return (


{/* */}

  {props.userSearchResults.map((track) => { 
      <Track track={track} key={track.id}/>

})}


);
}

export default Tracklist;

Here is my SearchResult component:

import React from “react”;
import styles from “./SearchResults.module.css”;
import Tracklist from “../Tracklist/Tracklist”;
function SearchResults (props) {
return (


{/* */}


);
}

export default SearchResults;

And finally, here is my App component:

import React, { useState } from “react”;
import styles from “./App.module.css”;
import SearchResults from “../SearchResults/SearchResults”;
import Playlist from “../Playlist/Playlist”;
function App () {
const [searchResults, setSearchResults] = useState([{
name: “example track name 1”,
artist: “example track artist 1”,
album: “example track album 1”,
id: 1
}, {
name: “example track name 2”,
artist: “example track artist 2”,
album: “example track album 2”,
id: 2
} ]);
const [playlistName, setPlaylistName] = useState(“Example Playlist”);
const [playlistTracks, setPlaylistTracks] = useState([{
name: “example track name 1”,
artist: “example track artist 1”,
album: “example track album 1”,
id: 1
}, {
name: “example track name 2”,
artist: “example track artist 2”,
album: “example track album 2”,
id: 2
}]);

return (
    <div>
    <h1>
      Ja<span className={styles.highlight}>mmm</span>ing
    </h1>
    <div className={styles.App}>
      {/* <!-- Add a SearchBar component --> */}
      
      <div className={styles["App-playlist"]}>
        {/* <!-- Add a SearchResults component --> */}
        <SearchResults userSearchResult={searchResults}/>
        {/* <!-- Add a Playlist component --> */}
        <Playlist playlistName={playlistName} playlistTracks={playlistTracks}/>
      </div>
    </div>
  </div>
    );

}

export default App;

I believe that the error is coming from the Tracklist component where the map function is not getting the data from the props. I’ve tried everything to get the data from App to the Tracklist but have been unable to figure it out. I’ve been stuck on this for over a day and can’t figure it out. Any help would be greatly appreciated.

2

If you paste the code directly into the forums, it loses formatting and is difficult to read. Instead, you can use the </> button. For more details, see: How do I format code in my posts?

Here are a few posts that may be of interest:

Go through the above linked posts/threads. If you are still stuck after reading the comments, post all of your code with proper formatting and perhaps we can spot the issue.

1 Like
5

Okay for sure. I deleted a few posts because I copied the wrong code for them. Here is the correct code for the Tracklist component:

import React from "react";
import styles from "./Tracklist.module.css";
import Track from "../Track/Track";

function Tracklist(props) {
    return (
        <div className={styles.Tracklist}>
        {/* <!-- You will add a map method that renders a set of Track components  --> */}

      {props.userSearchResults.map((track) => { 
          <Track track={track} key={track.id}/>
})}
      </div>
    );
}

export default Tracklist;

Here is my code for the SearchResults component:

import React from "react";
import styles from "./SearchResults.module.css";
import Tracklist from "../Tracklist/Tracklist";
function SearchResults (props) {
    return (
        <div className={styles.SearchResults}>
        {/* <!-- Add a TrackList component --> */}
        <Tracklist userSearchResults={props.userSearchResults}/>
      </div>
        );
}

export default SearchResults;

And finally, here is the App component:

import React, { useState } from "react";
import styles from "./App.module.css";
import SearchResults from "../SearchResults/SearchResults";
import Playlist from "../Playlist/Playlist";
function App () {
  const [searchResults, setSearchResults] = useState([{
    name: "example track name 1",
    artist: "example track artist 1",
    album: "example track album 1",
    id: 1
  }, { 
    name: "example track name 2",
    artist: "example track artist 2",
    album: "example track album 2",
    id: 2
  } ]);
  const [playlistName, setPlaylistName] = useState("Example Playlist");
  const [playlistTracks, setPlaylistTracks] = useState([{
    name: "example track name 1",
    artist: "example track artist 1",
    album: "example track album 1",
    id: 1
  }, { 
    name: "example track name 2",
    artist: "example track artist 2",
    album: "example track album 2",
    id: 2
  }]);

    return (
        <div>
        <h1>
          Ja<span className={styles.highlight}>mmm</span>ing
        </h1>
        <div className={styles.App}>
          {/* <!-- Add a SearchBar component --> */}
          
          <div className={styles["App-playlist"]}>
            {/* <!-- Add a SearchResults component --> */}
            <SearchResults userSearchResult={searchResults}/>
            {/* <!-- Add a Playlist component --> */}
            <Playlist playlistName={playlistName} playlistTracks={playlistTracks}/>
          </div>
        </div>
      </div>
        );
}

export default App;

Any help would be greatly appreciated.

1 Like
6

Where is the code for the Playlist.js file?

As suggested in the linked comments, there is a line in Playlist.js where a TrackList component is being rendered but the props for that component aren’t being provided till step 39. So, either ignore the error message till step 39 OR comment out the line in Playlist.js for the time being.

If you share your Playlist.js code, it will likely offer clues as to whether that is the cause of the issues you are experiencing.

7

Also, in App.js, you wrote:

<SearchResults userSearchResult={searchResults}/>

and in SearchResults.js, you wrote:

<Tracklist userSearchResults={props.userSearchResults}/>

This suggests to me that Tracklist expects to be passed the property props.userSearchResults, so I think that in App.js, the code should be:

// Instead of 
// <SearchResults userSearchResult={searchResults}/>
// it should be:
<SearchResults userSearchResults={searchResults}/>
1 Like
8

Here is the code for Playlist.js:

import React from "react";
import styles from "./Playlist.module.css";
import Tracklist from "../Tracklist/Tracklist";
function Playlist(props) {
  return (
    <div className={styles.Playlist}>
      <input defaultValue={"New Playlist"} />
      {/* <!-- Add a TrackList component --> */}
      <Tracklist userSearchResults={props.playlistTracks}/>
      <button className={styles["Playlist-save"]}>
        SAVE TO SPOTIFY
      </button>
    </div>
  );
}

export default Playlist;

I will try what you suggested to see what happens.

9

Hey good news I no longer get the error message but now the page doesn’t render the two searchResults objects in App.js. I am trying to figure out why the two objects aren’t rendering. I think I am passing the objects correctly with the props variables, but still no luck.

10

Can you share your latest code of App.js?

Which two are you referring to? I only see one instance of a SearchResults component in the code you posted for App.js

11

So in the App.js file, I created an array of two default searchResult objects with the useState function, and they are supposed to be rendered on the webpage. The code that I am referring to is the following:

  const [searchResults, setSearchResults] = useState([{
    name: "example track name 1",
    artist: "example track artist 1",
    album: "example track album 1",
    id: 1
  }, { 
    name: "example track name 2",
    artist: "example track artist 2",
    album: "example track album 2",
    id: 2
  } ]);

I used useState to create the searchResults array and the default values are the code that I showed above.

12

Here is the latest code of App.js as well:


import React, { useState } from "react";
import styles from "./App.module.css";
import SearchResults from "../SearchResults/SearchResults";
import Playlist from "../Playlist/Playlist";
function App () {
  const [searchResults, setSearchResults] = useState([{
    name: "example track name 1",
    artist: "example track artist 1",
    album: "example track album 1",
    id: 1
  }, { 
    name: "example track name 2",
    artist: "example track artist 2",
    album: "example track album 2",
    id: 2
  } ]);
  const [playlistName, setPlaylistName] = useState("Example Playlist");
  const [playlistTracks, setPlaylistTracks] = useState([{
    name: "example track name 1",
    artist: "example track artist 1",
    album: "example track album 1",
    id: 1
  }, { 
    name: "example track name 2",
    artist: "example track artist 2",
    album: "example track album 2",
    id: 2
  }]);

    return (
        <div>
        <h1>
          Ja<span className={styles.highlight}>mmm</span>ing
        </h1>
        <div className={styles.App}>
          {/* <!-- Add a SearchBar component --> */}
          
          <div className={styles["App-playlist"]}>
            {/* <!-- Add a SearchResults component --> */}
            <SearchResults userSearchResults={searchResults}/>
            {/* <!-- Add a Playlist component --> */}
            <Playlist playlistName={playlistName} playlistTracks={playlistTracks}/>
          </div>
        </div>
      </div>
        );
}

export default App;
13

In Tracklist.js, you wrote:

{props.userSearchResults.map((track) => { 
          <Track track={track} key={track.id}/>
})}

Since you are using curly braces for the body of the arrow function, you have two choices:

OPTION A: Do an Implicit Return by removing the curly braces

{props.userSearchResults.map((track) =>  
          <Track track={track} key={track.id}/>
)}

OPTION B: Retain the curly braces and do an explicit return

{props.userSearchResults.map((track) => { 
          return <Track track={track} key={track.id}/>
})}

Try one of the above options and see if it works.

1 Like
14

Doing the implicit return fixed everything and the two searchResult objects are rendering now. You are seriously a life saver thank you so much for your insight!

1 Like