'having issues adding functionality to skip, play and pause a react music player

Below is the code with the react component, there is functionality to the play and pause button also the ability to skip to the next track or previous track. Scenario: pressing 'play button' given 'play' button is displayed when the 'play' button is clicked it should be replaced with 'pause'.

Scenario: pressing 'pause button' given 'pause' button is displayed when the 'pause' button is clicked it should be replaced with 'play'.

Scenario: clicking 'next button' given some not last track is selected when the 'next' button is clicked the next track on the list is selected.

Scenario: clicking 'previous button' given some not last track is selected when the 'previous' button is clicked the previous track on the list is selected.

<!DOCTYPE html>
<html>
  <body class="main">
    <div id="app"></div>
  </body>
</html>




    const PlayButton = () => (
      <button
        aria-label="Play button"
        type="button"
        className="player-controls__btn player-controls__play-btn"
      />
    );
    
    const PauseButton = () => (
      <button
        aria-label="Pause button"
        type="button"
        className="player-controls__btn player-controls__pause-btn"
      />
    );
    
    const NextButton = () => (
      <button
        aria-label="Next button"
        type="button"
        className="player-controls__btn player-controls__next-btn"
      />
    );
    
    const PreviousButton = () => (
      <button
        aria-label="Previous button"
        type="button"
        className="player-controls__btn player-controls__prev-btn"
      />
    );
    
    const App = () => {
      const tracks = [
        {
          id: 1,
          name: 'Yesterday',
          artist: 'Beatles',
        },
        {
          id: 2,
          name: 'Nothing else matters',
          artist: 'Metallica',
        },
        {
          id: 3,
          name: 'Always',
          artist: 'Bon Jovi',
        },
        {
          id: 4,
          name: 'Waka Waka',
          artist: 'Shakira',
        },
      ];
      const [selectedTrack, setSelectedTrack] = React.useState({ ...tracks[0] });
      const [isPaused, setPaused] = React.useState(true);
    
      const onNextButtonClick = () => {
        // TODO: Write your code here
      };
      const onPreviousButtonClick = () => {
        // TODO: Write your code here
      };
    
    
      const renderTracks = () => tracks.map((track) => (
        <div className={`tracks-list__item ${selectedTrack.id === track.id ? 'tracks-list__item--selected' : ''}`} key={track.id}>
          <span className="tracks-list__name">{track.name}</span>
          <span className="tracks-list__artist">
            &nbsp;—&nbsp;
            {track.artist}
          </span>
        </div>
      ));
    
      return (
        <main>
          <div className="tracks-list">
            <h2 className="tracks-list__title">Tracks</h2>
            {renderTracks()}
          </div>
          <div className="player-controls">
            <PreviousButton />
            <PlayButton />
            <PauseButton/>
            <NextButton />
            <div className="player-controls__track">
              <span className="track__name">{selectedTrack.name}</span>
              <span className="track__artist">{selectedTrack.artist}</span>
            </div>
          </div>
        </main>
      );
    };
    
    ReactDOM.render(
      <App />,
      document.getElementById('app')
    );

javascript reactjs

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'having issues adding functionality to skip, play and pause a react music player

Sources

Related Questions