Jamming project stuck on exercise 34

I have a problem an error “TypeError: Cannot read property ‘map’ of undefined”

Hello, @xminimaster, and welcome to the forums.

So, you have an error. The message is telling you where to start looking. On what object did you try to invoke the .map() method? That object is undefined, so what is it, and where was it supposed to be defined?

2 Likes

Hi!,

I have the exact same error and understand your explanation @xminimaster but still don’t understand what the problem is. the prop tracks is supposed to be defined on SearchResults component and I have it like this:

export class SearchResults extends React.Component {
  render() {
    return (
      <div className="SearchResults">
        <h2>Results</h2>
        <TrackList tracks={this.props.searchResults}/>
      </div>
    )
    
  }
}

Can you help me understand where the error is? Thank you, A

Which stage of the tutorial are you at? This is not enough of your code to be able to determine what is going wrong, so you may be better off creating your own post with more detail of your issue.

At first glance, it would appear that your tracklist does not yet contain any tracks, or has not yet been defined, so it cannot be mapped over.

There are many moving parts in this app, and it won’t work properly when underlying components have been built yet or populated.

Did you find the solution to this? the actual object is defined in the App.js :
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>
    )
  }
}

then in SearchResults.js :

import TrackList from ‘…/TrackList/TrackList’;

class SearchResults extends React.Component {

render() {
        return(
            <div className="SearchResults">
  <h2>Results</h2>
  <TrackList tracks={this.props.searchResults} />
</div>
        )
    }
}

export default SearchResults;

then tracklist.js :

class TrackList extends React.Component {

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

export default TrackList;

where am i going wrong???

Please help on day 3 of no solution :frowning: cant render the site with errors so i cant continue the project…

This is a particularly prickly project, and what is going wrong can come down to one stray digit, so if you need help please make sure you provide the necessary level of detail.

It is easier to help if people link to their code and explain at what point an error occurred, what they’ve already tried, and so on. We can’t make assumptions about the code not shown - as everyone is at different stages in the project and might also have unpredictable errors.

The Do’s and Don’ts

Do format your code before posting.

  • Do make sure you post your question in the right category.
  • Do make sure you put the instructions, error and link to the exercise you are stuck on in your post.
  • Do make sure you put the exercise number in the post title.
  • Do ask for help if you need it!

@xminimaster

  • There’s a syntax error made in TrackList related to the difference between HTML and JSX. Take a look at @calummcq’s code issue and comments too to help you.

@calummcq a couple issues I can see in what you’ve shared here:

  • Compare the return statements in your render methods in SearchResults.js and tracklist.js… compare these two… there is a syntax error made in TrackList that you didn’t make in SearchResults, related to the difference between HTML and JSX.
  • Look at your import statement in SearchResults.js …have you got the address path name right?

@anagrilo0800339295 without seeing more of your code it’s difficult to know, however one thing you’ve done differently to @calummcq is how you’ve exported your SearchResults component as a named component rather than a default component. Either is fine, however the syntax for importing and exporting is slightly different between named and default components, so see if that helps.

Of course, there could be another bigger problem (likely is) but without being able to see all your code it is hard to help further. Might be worth looking at the resources in the Debugging course to learn some techniques, like using console.log to track where the website is breaking, what is and isn’t working.

Also, there is the video walk-through - though be warned, the video walk-through is imperfect and misses out adding an onClick event listener to one of the buttons. That happens towards the very end of the project.

Good luck :slight_smile:

1 Like

Hi,

So I have hit a bit of a wall with this. Everything was working fine until I added the .map() method. It is not showing an error but it is not compiling the page, leaving it blank. Could someone point me in the right direction please?

import React from 'react';

import './TrackList';

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;

TrackList

import React from 'react';

import './SearchResults.css'
import TrackList from '../TrackList/TrackList';


class SearchResults extends React.Component {
    render() {
        return (
            <div className="SearchResults">
                <h2>Results</h2>
                <TrackList tracks={this.props.searchResults} />
            </div>

        )
    }
}
export default SearchResults;

SearchResults

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: [{ name: 'name1', artist: 'artist1', album: 'album1', id: 1 },
      { name: 'name2', artist: 'artist2', album: 'album2', id: 3 },
      { 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;
type or paste code here

App

Thanks

My issue was that I already added the <Tracklist /> component into my <Playlist> component. I commented it out and it resolved.
Since the <Playlist> component wasn’t receiving the same props data, it was throwing the undefined map error.

I was able to solve it by adding console.log(this.props.tracks) & console.log(typeof(this.props.tracks)) into the render method on Tracklist.js

Keep calm and code on!

2 Likes

Thank you so much!! I was going crazy trying to find out what was wrong with the code, I started thinking that perhaps I needed to bind the this… why did you check typeof(this.props.tracks)? how did you find out that the error was in another file?

Savior! <3

1 Like

Type checking can be a helpful method of debugging.

If memory serves, the error was referencing props. At this point the only props that were freshly added were those in the Playlist component. Which means props being undefined didn’t make sense for the Playlist component.

I don’t quite remember beyond this :sweat_smile: as it’s been about 6 weeks. Also, don’t worry too much about Class Components. This project is based off React v16. React v18 leans into function components which are a lot more intuitive and nicer to use. Knowing Class Components is okay to create a foundation, but I suspect you won’t be using them much unless you work on an old codebase.

I’m happy to hop onto a pair programming session if you want to chat about it in detail. If so, send me a dm in the forum.

1 Like