When a user clicks on one track and does not pause it or wait for the track preview to finish, if the user then clicks on a second track play preview icon, the track will play over the currently playing track.
This quite an annoying caveat, but one that you can work out.
What it sounds like you should do, is have the actual "audio player" be a parent component (maybe the Tracklist or Playlist component). This component should hold the state for which track is playing.
Then, when another track is clicked on, it should update the state of the parent component which should in turn change the state of the original track via props.
This is a pattern you covered: sibling components updating eachother's state. Just pass the state up to the parent, and then back down again via props.
https://www.codecademy.com/courses/react-102/lessons/child-updates-sibling/exercises/child-updates-sibling-intro
This quite an annoying caveat, but one that you can work out.
What it sounds like you should do, is have the actual "audio player" be a parent component (maybe the Tracklist or Playlist component). This component should hold the state for which track is playing.
Then, when another track is clicked on, it should update the state of the parent component which should in turn change the state of the original track via
props.This is a pattern you covered: sibling components updating eachother's state. Just pass the state up to the parent, and then back down again via props.
https://www.codecademy.com/courses/react-102/lessons/child-updates-sibling/exercises/child-updates-sibling-intro