This is a question specifically for the Jammming project.
I have been able to successfully get the add button to work in my code but for some reason the remove button does not work and will give me an error.
Cannot read properties of undefined (reading ‘map’)
This error is from calling in and upon doing a console.log of the tracks in my playlist it turns out that it is just undefined. And it only happens when trying to remove a song from the playlist, I don’t understand why it won’t just remove one track and instead just delete the entire playlist. I have even gone into the solution folder and I cannot see a difference between how I implemented the callback and how they did.
App.js
import logo from './logo.svg';
import './App.css';
import SearchResults from './components/SearchResults/SearchResults';
import Playlist from './components/Playlist/Playlist';
import React, {useState, useCallback} from 'react';
const defaultTracklist = [
{
name: 'Left Behind',
artist: 'The Plot In You',
album: 'Left Behind',
id: 6
},
{
name: 'Dreamstate',
artist: 'Dayseeker',
album: 'Dark Sun',
id: 5
},
{
name: 'Kashmir - Remaster',
artist: 'Led Zeppelin',
album: 'Physical Graffiti (Deluxe Edition)',
id: 4
}
];
const defaultPlaylistName = 'Beats';
const defaultPlaylist = [
{
name: 'CAREFUL',
artist: 'NF',
album: 'HOPE',
id: 1
},
{
name: 'Perfect',
artist: 'Logic',
album: 'Sweeter Scars',
id: 2
},
{
name: 'Raindrops',
artist: 'Metro Boomin',
album: 'HEROES & VILLAINS (Deluxe)',
id: 3
}
];
function App() {
const [searchResults, setSearchResults] = useState(defaultTracklist);
const [playlistTracks, setPlaylistTracks] = useState([]);
const [playlistName, setPlaylistName] = useState(defaultPlaylistName);
const addTrack = useCallback((track) => {
if (playlistTracks.some((currentTrack) => currentTrack.id === track.id)) {
return;
}
setPlaylistTracks((prevTracks) => [...prevTracks, track]);
}, [playlistTracks]);
const removeTrack = useCallback((track) => {
setPlaylistTracks((prevTracks) => {
prevTracks.filter((currentTrack) => currentTrack.id !== track.id)
});
}, []);
return (
<div className="App">
<main className='App-main'>
<div className='tracklist-container'>
<h1>Results</h1>
<SearchResults trackResults={searchResults} onAdd={addTrack}/>
</div>
<div className='playlist-container'>
<Playlist
playlist={playlistTracks}
name={playlistName}
onRemove={removeTrack}
/>
</div>
</main>
</div>
);
}
export default App;
Playlist.js
import React from 'react';
import Tracklist from '../Tracklist/Tracklist';
import './Playlist.css'
function Playlist(props) {
return (
<div className='Playlist'>
<input type='text' placeholder='Rad New Playlist' required/>
<Tracklist
list={props.playlist}
isRemoval={true}
onRemove={props.onRemove}/>
</div>
)
}
export default Playlist;
Tracklist.js
import React from 'react';
import Track from '../Track/Track';
import './Tracklist.css';
function Tracklist(props) {
return (
<div className='Tracklist'>
{console.log(props.list)}
{props.list.map((track) => {
return (
<>
<Track
track={track}
key={track.id}
isRemoval={props.isRemoval}
onAdd={props.onAdd}
onRemove={props.onRemove}
/>
</>
)
})}
</div>
)
}
export default Tracklist;
Track.js
import React, {useCallback} from 'react';
import './Track.css';
function Track(props) {
const addTrack = useCallback((event) => {
props.onAdd(props.track);
}, [props.onAdd, props.track])
const removeTrack = useCallback((event) => {
props.onRemove(props.track);
}, [, props.onRemove, props.track])
function render() {
if (props.isRemoval) {
return <button onClick={removeTrack}>Remove</button>
} else {
return <button onClick={addTrack}>Add</button>
}
}
return (
<div className='Track'>
<h2>{props.track.name}</h2>
<p>{props.track.artist} | {props.track.album}</p>
{render()}
</div>
)
}
export default Track;