Help with jammming project

Thank you That did it. I really appreciate the help. I was staring at it for so long. Nice to have a 2nd pair of helpful eyes.

1 Like

Yeah, I know the feeling) Sometimes we are “just one comma away from success”))

Did you work this out? I have the same problem. Thanks. :slight_smile:

I’m trying to run the build for the jamming project but I’m getting this error:

npm ERR! code ENOENT
npm ERR! syscall open
npm ERR! path C:\Users\Tom Brophy\Desktop\codecademy-react-course\jamming\package.json
npm ERR! errno -4058
npm ERR! enoent ENOENT: no such file or directory, open 'C:\Users\Tom Brophy\Desktop\codecademy-react-course\jamming\package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! A complete log of this run can be found in:        
npm ERR!     C:\Users\Tom Brophy\AppData\Roaming\npm-cache\_logs\2020-06-13T21_35_17_655Z-debug.log

Nice One!
In my mind i was describing the issue to myself, but not experienced enough to connect the dots.
everyday is a school day, thanks for the post:+1: :+1: :+1:

1 Like

SOLVED MY ISSUE! Thank you @jdrmiller

1 Like

Help with jammming projectI am new to React and recently downloaded the most update version. I completed the code in the project and am now receiving any errors accept: HMR] Waiting for update signal from WDS…

https://www.codecademy.com/paths/web-development/tracks/front-end-applications-with-react/modules/jammming/projects/jammming-prj

I tried to see if the web.server.js was working property and looked through the hot folder under node.modules, but I don’t know enough and can’t seem to find what would be wrong.

The DOM updates when I make any changes to the code, but with this not working the search function is not working with the API.

When I enter a topic and click Search nothing is working! I’ve pasted the code to App.js, SearchResults.js and Searchbar.js below is this is helpful.

import React from ‘react’;
import ‘./App.css’;
import SearchBar from ‘…/SearchBar/SearchBar’;
import SearchResults from ‘…/SearchResults/SearchResults’;
import Playlist from ‘…/Playlist/Playlist’;
import Spotify from ‘…/…/util/Spotify’;

class App extends React.Component {
constructor(props){
super(props);
this.state = {
searchResults: ,
playlistName: ‘My Playlist’,
playlistTracks:
};
this.addTracks = this.addTracks.bind(this);
this.removeTrack = this.removeTrack.bind(this);
this.updatePlaylistName = this.updatePlaylistName.bind(this);
this.savePlaylist = this.savePlaylist.bind(this);
this.search = this.search.bind(this);
}

addTracks(track) {
let tracks= this.state.playlistTracks;
if (tracks.find(savedTrack => savedTrack.id === track.id)){
return;
} else {
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});

}

updatePlaylistName(name) {
this.setState({playlistName: name});
}

savePlaylist() {
const trackUris = this.state.playlistTracks.map(track => track.uri);
Spotify.savePlaylist(this.state.playlistName, trackUris).then(() => {
this.setState({
playlistName: ‘New Playlist’,
playlistTracks:
})
})
}

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

render() {
return (


Jammming








) } }

export default App;

import React from ‘react’;
import ‘./SearchBar.css’;

class SearchBar extends React.Component {
constructor(props){
super(props);

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

search() {
    this.props.onSearch(this.state.term);
}

handleTermChange(event) {
    this.setState({term: event.target.value});
}

render() {
    return(
        <div className="SearchBar">


SEARCH

)
}
}

export default SearchBar;

import React from ‘react’;
import ‘./SearchResults.css’;
import TrackList from ‘…/TrackList/TrackList’;

class SearchResults extends React.Component {
render() {
return (


Results




)
}
}

export default SearchResults;

Any help is much appreciated!

I would like to help you but unfortunately your question is very unclear. It would be helpful if you can specify the error you are getting.

Some tips:

  • Have your console open while you test your code.
  • Comment out changes you made in the past few steps until your front-end is working, and then take each step carefully, checking where it breaks.
  • Use the React developer tools in Chrome or MS Edge 2020.

Finally, when you post here in the forums, surround anything that’s code with backticks like this.

Wow!!! I really wanted to thank you. I looked through the video line by line for a few hours and still couldn’t get it working. Feel so dumb not to notice the onClick not on the button.

1 Like

Wow, that little thing solved my issue with the Button too! Thank you @alla_arefieva !

@jdrmiller Thanks, I was missing this also.

1 Like

I tried that it didn’t work me

Hi adeyinka25!

Sorry this resolve didn’t work for you. Are you experiencing the same issue that was originally reported? Since this did not work, could you explain what your experiencing, along with any additional error messages?

It’s been quite some time since I’ve looked at the jammin app, and I no longer have my source files, however, I’m happy to see if we can help.

Also, it’s wild that this is still one of the big projects. That was 4 years ago, and it existed before then! Lol

I’m also assuming the project hasn’t been updated, if it has, then this thread is likely obsolete.

I’m overjoyed that my original comment has helped so many get their capstone working.