Tracks Component

music-master/src/components/App.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import Artist from './Artist';
+import Tracks from './Tracks';
 
 const API_ADDRESS = 'https://spotify-api-wrapper.appspot.com';
 
@@ -48,6 +49,7 @@ class App extends Component {
         />
         <button onClick={this.searchArtist}>Search</button>
         <Artist artist={this.state.artist} />
+        <Tracks tracks={this.state.tracks} />
       </div>
     ); 
   }

music-master/src/components/Tracks.js

@@ -0,0 +1,46 @@
+import React, { Component } from 'react';
+
+class Tracks extends Component {
+  state = { playing: false, audio: null, playingPreviewUrl: null };
+
+  playAudio = previewUrl => () => {
+    const audio = new Audio(previewUrl);
+
+    if (!this.state.playing) {
+      audio.play();
+      this.setState({ playing: true, audio, playingPreviewUrl: previewUrl });
+    } else {
+      this.state.audio.pause();
+
+      if (this.state.playingPreviewUrl === previewUrl) {
+        this.setState({ playing: false });
+      } else {
+        audio.play();
+        this.setState({ audio, playingPreviewUrl: previewUrl });
+      }
+    }
+  }
+
+  render() {
+    const { tracks } = this.props;
+
+    return (
+      <div>
+        {
+          tracks.map(track => {
+            const { id, name, album, preview_url } = track;
+
+            return (
+              <div key={id} onClick={this.playAudio(preview_url)}>
+                <img src={album.images[0].url} alt='track-image' />
+                <p>{name}</p>
+              </div>
+            )
+          })
+        }
+      </div>
+    )
+  }
+}
+
+export default Tracks;