Jammming - Step 51. step 52: onRemove undefined

Hey there,

i got stuck. For i miss something somewhere and as a result i have my “props” onRemove: undefined. I followed video instructions. It did not help me to identify the problem. I want to understand it. There was one similar post in forum but it is useless in terms of understading what i doing wrong.
Here is the screen shot from dev tool:

Here is my code in 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;

Here is my code in PlayList.js:

import React from "react";
import TrackList from "../TrackList/TrackList";
import "./PlayList.css";

class PlayList extends React.Component {
	render() {
		return (
			<div className='Playlist'>
				<input defaultValue={"New Playlist"} />
				<TrackList
					tracks={this.props.playListTracks}
					onRemove={this.props.onRemove}
					isRemoval={true}
				/>
				<button className='Playlist-save'>SAVE TO SPOTIFY</button>
			</div>
		);
	}
}

export default PlayList;

here is my code in App.js:

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: 2 },
				{ name: "name3", artist: "artist3", album: "album3", id: 3 },
			],
			playListName: "PlayListName",
			playListTracks: [
				{
					name: "playListName1",
					artist: "playListArtist1",
					album: "playListAlbum1",
					id: 4,
				},
				{
					name: "playListName2",
					artist: "playListArtist2",
					album: "playListAlbum2",
					id: 5,
				},
				{
					name: "playListName3",
					artist: "playListArtist3",
					album: "playListAlbum3",
					id: 6,
				},
			],
		};
		this.addTrack = this.addTrack.bind(this);
		this.removeTrack = this.removeTrack.bind(this);
	}

	addTrack(track) {
		let tracks = this.state.playListTracks;

		if (tracks.find((savedTrack) => savedTrack.id === track.id)) {
			console.log(track.id);
			console.log(track);
			return;
		}
		tracks.push(track);
		this.setState({ playListTracks: tracks });
	}

	removeTrack(track) {
		let tracks = this.state.playListTracks;

		tracks = tracks.filter((currentTrack) => currentTrack.id !== track.id);
		this.setState({ playListTracks: tracks });
	}

	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}
							onAdd={this.addTrack}
						/>
						<Playlist
							playListName={this.state.playListName}
							playListTracks={this.state.playListTracks}
							onRemove={this.removeTrack}
						/>
					</div>
				</div>
			</div>
		);
	}
}

export default App;

Please help with identifying what am i missing so that i have onRemoval props “undefined”

Thanks in advance,
Rashad

Hi,

in your screenshot of the devtools you’re looking at the tree SearchResults > Tracklist > Track. But you don’t pass onRemove as props to SearchResults.

If you look at the props two levels up at the component SearchResults, you’ll see that it doesn’t have a props onRemove in the first place, I suppose.

What if you take the other Route: Add a track (I assume that’s working now :slight_smile: ) to the Playlist and look at that track’s props in devtools taking the path Playlist > Tracklist > Track

1 Like

First of thank you so much @mirja_t for your help. second i feel so embarrassed. but i guess this is part of the learning process :)))

1 Like

Yes it is…
You‘re welcome - happy coding!

1 Like