Props

Hello,

can somebody tell my why this is working:

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

The map method on this.props.searchResults reveals the information (result.name, result.artist). And the following piece of code sucks:

export class TrackList extends React.Component {
 
    render(){
        return (
          <div>
             <div className="TrackList">
             { 
            this.props.tracks.map(track => {
                        <Track track = {track}/>
             })
              }    
         </div> 
       
          </div>
      )
    }

}

this.props.tracks.map() does not work. why? I learned that this should be a powerful tool of react, where the components are able to pass information to each other unlimited times.

Thanks for providing me with an answer,
Katha

1 Like

Hello, @justsql

I’d like to draw your attention to the function that you’ve passed to the map function call. Could you take a closer look at the syntax of the callback function and point out what’s going wrong here?

Hello nova-xronos,

Ok I see forgot the return statement. the map function looks like this now:

 this.props.tracks.map(track => {
                       return <Track track = {track}/>
                                            }) 

And still, I have the same error as before:

TypeError: Cannot read property ‘map’ of undefined

TrackList.render

src/Components/TrackList/TrackList.js:13

  10 |           
  11 |      return (  
  12 |         
 > 13 |              <div className="TrackList">  
14 |                   {   
15 |                      this.props.tracks.map(track => {  
16 |                        return <Track track = {track}/>

View compiled

WHY?

The error suggests that it’s a type error which means that the tracks props that are being passed to the TrackList component is not an array. If it was an array, then the .map() function would work correctly without throwing an error. But, reading the error more carefully, we see that this.props.tracks is indeed not an array.

What’s going wrong with the passing of the props? Are you sure that the TrackList component is receving the correct props with the correct data type? Or is it something else?

Hey nova-xronos,

where do you see that this.props.tracks is not an array? In the component SearchResults I am mapping this.props.searchResults and it works. This array ( this.props.searchResults ) is passed to the TrackList:

<TrackList tracks = {this.props.searchResults}/>

In the TrackList the same array is accessible by this.props.tracks
but this.props.tracks.map() is not working. The array is passed down but I don#t know why TrackList does not receive it?

Maybe additional code is necessary?

1 Like

Hey @justsql

I just read the error message and it’s a TypeError.

Type Errors are thrown when a value is being used inappropriately. You’re trying to access a method called .map() which is available on the Array.prototype class.

If you try to access the .map() method on any other type if it’s not defined, then JS would throw a type error.

Ex: I’m trying to access the .map() method on a Number type which is not available and JS will throw a type error.

console.log('Hello world!'); var a = 13; console.log(a.map());

So, in conclusion, this.props.tracks is not array and hence the tracks prop isn’t receiving an array in the first place.

Hey nova-xronos,

In case you are interested, here is the solution: CodeAcademy : Jamming Project Bug 34 = (Cannot read property 'map' of undefined) Fixed. - YouTube
This a question of definition, which react-components do have access to information of other components.

best regards:
Katha

1 Like