Cannot read proerties of undefined (reading 'map')


It’s eluding me as to why I’m receiving the screenshotted error. Please can someone help me?

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}
							onAdd={this.props.onAdd}
							onRemove={this.props.onRemove}
							isRemoval={this.props.isRemoval}
						/>
					);
				})}
			</div>
			</>
		);
	}
}

export default TrackList;

Track.js

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(	
<div className="Track">
  <div className="Track-information">
    <h3>{this.props.track.name}</h3>
    <p>{this.props.track.artist} | {this.props.track.album}</p>
  </div>
 
  {this.renderAction()}
</div>

	)
	}
};


export default Track;

It means by the time that line is reached. this.props.tracks is undefined (hence it cannot have the method map.

A quick “fix” is to set a default that prevents the variable from being undefined and has a default map property (I think this is not a good fix). A better fix is to find out where it became undefined and re-frame the code so that it never gets there undefined (or maybe there was a typo or something that wasn’t caught).

Heavily recommend using a debugger. Debug JavaScript - Chrome for Developers

2 Likes

Yes, to piggy back off of @toastedpitabread . You’re getting that error because the value of this.props.track is undefined .
There are a few ways to handle it, first figure out why exactly is it undefined and make sure there’s no underlying issue with retrieving that data. Then, you can make sure the default value of this.props.track is equal to an empty array [ ] , which should prevent the error and/or use the coalescing operator this.props.track?.map() which will just return undefined and prevent that specific type error

1 Like

@toastedpitabread @bracketmagickbri appreciate you’ll likely need to see more of my code for this, but I would need to declare an empty array for this.props.track in either the Track.js constructor, or TrackList.js constructor?

Possibly. More often than not for these (at least for me) it comes from a typo or some assumption that something would go through that doesn’t always (or at least could potentially take a while because of an async request.

Having some way of debugging the state of your variables is incredibly important for purposes beyond this so I’d get comfortable with that.