Jammming (Cannot read property ‘map’ of undefined)

I’ll be honest, I’m totally stuck on this project and I can’t find a solution to this issue. I’m not the best with React & JSX by the way. Thanks in advance.

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


class Track extends React.Component {
constructor(props){
super(props);
this.addTrack = this.addTrack.bind(this);
this.removeTrack =this.removeTrack.bind(this);
}



renderAction() {
	if(this.props.isRemoval) {
		return <button className="Track-action" onClick={this.removeTrack}>-</button>
	} else {
       return <button className="Track-action" onClick={this.addTrack}>+</button>
	}

}



addTrack() {
this.props.onAdd(this.props.track);
}



removeTrack() {
this.props.onRemove(this.props.track);
}


	

render() {
return(

{this.props.track.name}

{this.props.track.artist} | {this.props.track.album}

{this.renderAction()}
)
}

};



export default Track;

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} 
    	onRemove={this.props.onRemove} isRemoval={true} />

    },

    )

	}
	</div>
	)

	};
};

It’s a common problem. Hopefully some of these threads have the answers in, as I see this come up a lot: cannot read property ‘map’ of undefined

1 Like

I’m still not getting my solution, but thanks for the link mate

1 Like