I am trying to create a method called addTrack with the following functionality:

• Accepts a track argument
• Use the track’s id property to check if the current song is in the playlistTracks state

• If the id is new, add the song to the end of the playlist.

• Set the new state of the playlist.

What would be the difference if I use the code #1 instead of code #2?

PlaylistTracks is defined in the constructor as following:

playlistTracks: [{ name: 'name1', artist: 'artist1', album: 'album1', id: 1 },
        { name: 'name2', artist: 'artist2', album: 'album2', id: 2 },
      ]

Code #1

addTrack(track){
if (this.state.playlistTracks.includes(this.props.track.id)) {return;}
else {this.state.playlistTracks.push(track);
  this.setState({playlistTracks:this.state.playlistTracks});
}

}

Code #2

addTrack(track) {
if (this.state.playlistTracks.find(savedTrack => savedTrack.id===track.id) {return;}
else {return this.state.playlistTracks.push(track);}
this.setState(playlistTracks:this.state.playlistTracks)}

I am trying to create a method called addTrack with the following functionality:

• Accepts a track argument
• Use the track’s id property to check if the current song is in the playlistTracks state

• If the id is new, add the song to the end of the playlist.

• Set the new state of the playlist.

What would be the difference if I use the code #1 instead of code #2?

PlaylistTracks is defined in the constructor as following:

playlistTracks: [{ name: 'name1', artist: 'artist1', album: 'album1', id: 1 },
        { name: 'name2', artist: 'artist2', album: 'album2', id: 2 },
      ]

Code #1

addTrack(track){
if (this.state.playlistTracks.includes(this.props.track.id)) {return;}
else {this.state.playlistTracks.push(track);
  this.setState({playlistTracks:this.state.playlistTracks});
}

}

Code #2

addTrack(track) {
if (this.state.playlistTracks.find(savedTrack => savedTrack.id===track.id) {return;}
else {return this.state.playlistTracks.push(track);}
this.setState(playlistTracks:this.state.playlistTracks)}

• javascript
• reactjs
• jsx

1 Answer 1

array.includes will just return true or false if the value is there or not

array.find will find the specific item in the array for you

e.g.

[1,2,3].includes(1) // returns true
[1,2,3].includes(4) // returns false

[1,2,3].find(i => i === 1) // returns 1
[1,2,3].find(i => i === 5) // returns undefined