Jamming project Help

I’m not sure what the real problem is, to be honest. My code isn’t showing any visible errors… My tracks render after I search for an artist but doesn’t work when I click the “+” button to add to the playlist. Everything looks good to me so I’m really confused as to why it’s not working. Any type of help or suggestions will be appreciated, thanks!

Hi, welcome to the forum!

If you post the relevant code someone might be able to help you figure out why the button it isn’t working as intended. The button requires props to be passed along a chain so the code that affects it is going to be in a few of your js files;

In the render method of:
Track.js
Tracklist.js
SearchResults.js
App.js

You also create the following methods in app.js which also contribute to the button functioning;
addTrack()
removeTrack()

This is my Track.js code

import React from ‘react’;

import ‘./Track.css’;

class Track extends React.Component {

constructor(props) {

super(props);

this.renderAction = this.renderAction.bind(this);

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;

END Track.js

App.js code

import React from ‘react’;

import SearchBar from ‘…/SearchBar/SearchBar’;

import SearchResults from ‘…/SearchResults/SearchResults’;

import Playlist from ‘…/Playlist/Playlist’;

import Spotify from ‘…/…/util/Spotify’;

import ‘./App.css’;

class App extends React.Component {

constructor(props) {

super(props);

this.state = {

  searchResults: [],

  playlistName: '',

  playlistTracks: [],

}

this.search = this.search.bind(this);

this.addTrack = this.addTrack.bind(this);

this.removeTrack = this.removeTrack.bind(this);

this.updatePlaylistName = this.updatePlaylistName.bind(this);

this.savePlaylist = this.savePlaylist.bind(this);

}

componentDidMount() {

window.addEventListener('load', () => {Spotify.getAccessToken()});

}

search(term) {

Spotify.search(term).then(searchResults => this.setState({searchResults: searchResults}));

}

addTrack(track) {

let playlistTracks = this.state.playlistTracks;

if (playlistTracks.find(playlistTrack => playlistTrack.id === track.id)) {

  return;

}

playlistTracks.push(track);

this.setState({playlistTracks: playlistTracks})

}

removeTrack(track) {

let playlistTracks = this.state.playlistTracks;

playlistTracks = playlistTracks.filter(playlistTrack => playlistTrack.id !== track.id);

this.setState({playlistTracks: playlistTracks})

}

updatePlaylistName(name) {

this.setState({playlistName: name})

}

savePlaylist() {

const trackUris = this.state.playlistTracks.map(track => track.uri);

Spotify.savePlaylist(this.state.playlistName, trackUris);

this.setState({

  playlistName: 'New Playlist',

  playlistTracks: [],

});

document.querySelectorAll('input')[1].value = 'New Playlist';

}

render() {

return (

  <div>

    <h1>Ja<span className="highlight">mmm</span>ing</h1>

    <div className="App">

      <SearchBar onSearch={this.search} />

      <div className="App-playlist">

        <SearchResults 

          searchResults={this.state.searchResults} 

          onAdd={this.addTrack}

        />

        <Playlist 

          playlistName={this.state.playlistName} 

          playlistTracks={this.state.playlistTracks}

          onRemove={this.removeTrack}

          onNameChange={this.updatePlaylistName}

          onSave={this.savePlaylist}

        />

      </div>

    </div>

  </div>

)

}

}

export default App;

Still missing some of the relevant code from some of the files. In hindsight perhaps posting all of it here is a bit messy. Maybe post the project to git and share the link with us.

In the meantime you could also try watching the walkthrough video for the steps that you are having trouble with. You can find it in the “get unstuck” section on tje bottom right of the project page.

I just went to look at the code on GitHub but it would seem it no longer exists amongst your repositories.

dang I’m sorry, here’s the link.

The props chain seems good.

In your track.js I think you might be missing some parenthesis when you are calling this.addTrack and this.removeTrack in the onClick sections. I’ll mark it with *

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

Try adding () in place of my * and see if it fixes it.

Still nothing, I honestly believe everything is good but it still refuses to work. idk

I downloaded the code this morning and had a play with it. I’ve got it working, you’re going to kick yourself…

In playlist.js you commented out your import statement for Tracklist and also commented out the Tracklist instance in the render function. I removed the comment syntax and it worked as you expected.

Ignore my earlier comment about adding parenthesis, your original version of the renderAction function in track.js was correct.

omg man… well they told us to comment it out at the beginning of the project so I thought nothing of it. Thanks!

1 Like