как получить каждый трек сохраненных песен из Spotify API

Question

Я пытаюсь получить все сохраненные песни пользователей с помощью Spotify API в React JS. Я не знаю, как отображать каждую дорожку из списка воспроизведения, сохраненного пользователями.

import React, { Component } from 'react';
import './App.css';
import SpotifyWebApi from "spotify-web-api-js";

const spotifyApi = new SpotifyWebApi();

class App extends Component {
  constructor() {
    super();
    const params = this.getHashParams();
    const token = params.access_token;


    if (token) {
      spotifyApi.setAccessToken(token);
    }
    this.state = {
      loggedIn: token ? true : false,
      nowPlaying: { name: 'Aktuell wird kein Song gespielt', albumArt: '', artist: '' },
      devices: { name: 'Kein Gerät' },
      playlist: { playlistName: '' },
      tracks: { name: '', albumArt: '', artist: '', id: '' }
    }

  }


  getHashParams() {
    var hashParams = {};
    var e, r = /([^&;=]+)=?([^&;]*)/g,
      q = window.location.hash.substring(1);
    while (e = r.exec(q)) {
      hashParams[e[1]] = decodeURIComponent(e[2]);
    }
    return hashParams;

  }

  getPlaylist() {
    spotifyApi.getUserPlaylists()
      .then((response) => {
        this.setState({
          playlist: {
            playlistName: response.items.forEach.name
          }
        })
      })
  }

  getDevice() {
    spotifyApi.getMyDevices()
      .then((response) => {
        this.setState({
          devices: {
            name: response.devices[0].name
          }
        });
      })
  }

  getUserTracks() {
    spotifyApi.getMySavedTracks()
      .then((response) => {
        this.setState({
          tracks: {
            name: response.items[0].track.name,
            albumArt: response.items[0].track.album.images[0].url,
            artist: response.items[0].track.artists[0].name
          }
        })
      })
  }


  getNowPlaying() {
    spotifyApi.getMyCurrentPlaybackState()
      .then((response) => {
        this.setState({
          nowPlaying: {
            name: response.item.name,
            albumArt: response.item.album.images[0].url,
            artist: response.item.artists[0].name,
          }
        });

      })
  }



  render() {
    return (
      <div className="App">
        {
          this.getHashParams() ?
            (<div>
              <div className="sidenav">
                <div className="profile">
                  <img src="./me.jpg" width="90px" height="90px" className="avatar-pic" alt="Avatar" />
                </div>
                <ul>
                  <li><a href="#home">Library</a></li>
                  <li><a href="#browse">Browse</a></li>
                  <li><a href="http://localhost:8888">Album</a></li>
                  <li><a href="http://localhost:8888">Artist</a></li>
                </ul>
              </div>
              <div className="wrapper">
                <div className="hero-wrapper">
                  <div className="header">
                    <h1 className="title" id="home" >Library</h1>
                    <div className="btns">
                      <button className="btn logout-btn"><a href="https://accounts.spotify.com/de/status" id="logout">Logout</a></button>
                      <button onClick={
                        () => {
                          this.getDevice();
                          this.getNowPlaying();
                          this.getPlaylist();
                          this.getUserTracks();
                        }}
                        className="btn check-btn">Check Whats playing</button>
                    </div>
                  </div>

                  <div className="playlists">
                    <div className="playlist-item">
                      <img src={this.state.tracks.albumArt} width="50px" height="50px" alt="Albumart" />
                      <h1>{this.state.tracks.name} - {this.state.tracks.artist}</h1>
                    </div>
                    <div className="playlist-item">
                      <img src={this.state.tracks.albumArt} width="50px" height="50px" alt="Albumart" />
                      <h1>{this.state.tracks.name} - {this.state.tracks.artist}</h1>
                    </div>
                    <div className="playlist-item">
                      <img src={this.state.tracks.albumArt} width="50px" height="50px" alt="Albumart" />
                      <h1>{this.state.tracks.name} - {this.state.tracks.artist}</h1>
                    </div>
                    <div className="playlist-item">
                      <img src={this.state.tracks.albumArt} width="50px" height="50px" alt="Albumart" />
                      <h1>{this.state.tracks.name} - {this.state.tracks.artist}</h1>
                    </div>
                    <div className="playlist-item">
                      <img src={this.state.nowPlaying.albumArt} width="50px" height="50px" alt="Albumart" />
                      <h1>{this.state.tracks.name} - {this.state.tracks.artist}</h1>
                    </div>
                    <div className="playlist-item">
                      <img src={this.state.tracks.albumArt} width="50px" height="50px" alt="Albumart" />
                      <h1>{this.state.tracks.name} - {this.state.tracks.artist}</h1>
                    </div>
                    <div className="playlist-item">
                      <img src={this.state.tracks.albumArt} width="50px" height="50px" alt="Albumart" />
                      <h1>{this.state.tracks.name} - {this.state.tracks.artist}</h1>
                    </div>
                    <div className="playlist-item">
                      <img src={this.state.tracks.albumArt} width="50px" height="50px" alt="Albumart" />
                      <h1>{this.state.tracks.name} - {this.state.tracks.artist}</h1>
                    </div>
                  </div>
                  <div className="header">
                    <h1 className="title" id="browse">Browse</h1>
                  </div>
                </div>
              </div>





              <div className="song-card">
                <div className="album-art">
                  <img src={this.state.nowPlaying.albumArt} alt="Albumart" className="album-cover" width="60px" />
                </div>
                <div className="song-info">
                  <div className="song-label">
                    <h1> {this.state.nowPlaying.name}</h1>
                  </div>
                  <div className="song-artist">
                    <p>{this.state.nowPlaying.artist}</p>
                  </div>
                </div >
                <div className="player-wrapper">
                  <span>0:25</span>
                  <div className="controls">
                    <button>Pause</button>
                  </div>
                  <div className="progress-bar">
                    <div className="progress-bar-complete">
                    </div>
                  </div>
                  <span>3:45</span>
                </div>

                <div className="playing-device">
                  <img src="./mockup.png" width="30px" className="mockup" alt="Device" />
                  <div className="device-information">
                    <h1>{this.state.devices.name}</h1>
                    <p>connected</p>
                  </div>
                </div>
              </div>
            </div>
            ) :
            (<div>
              <a href="http://localhost:8888">
                <button className=" btn login-btn">Login With Spotify</button>
              </a >
            </div>)
        }
      </div >
    );
  }
}

export default App;

Запрос api работает нормально, но показывает только первый трек из песен, сохраненных пользователями. Может ли кто-нибудь помочь l oop через песни, чтобы я мог отображать каждую дорожку в другом div. каждая песня должна отображаться в playlist-item div