When parent state is updated child props won't

Question

From the child component PlaylistSpotify I am able to update the state localPlaylist of its parent. The problem is then the PlaylistSpotify props won't update with the new results. I've been stuck for a while and if anyone could explain me what I'm missing/ doing wrong that would be really appreciated.

App.js

import React from "react";

import SearchBar from "../SearchBar/SearchBar";
import SearchResults from "../SearchResults/SearchResults";
import Playlist from "../Playlist/Playlist";
import Spotify from "../../util/Spotify";
import PlaylistSpotify from "../PlaylistSpotify/PlaylistSpotify";

import "./App.css";


class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      searchInput: "",
      searchResults: [],
      playlistName: "New Playlist",
      playlistTracks: [],

      localPlaylists: [],

    };

    this.addTrack = this.addTrack.bind(this);
    this.removeTrack = this.removeTrack.bind(this);
    this.updatePlaylistName = this.updatePlaylistName.bind(this);
    this.savePlaylist = this.savePlaylist.bind(this);
    this.search = this.search.bind(this);
    this.getLocalPlaylists = this.getLocalPlaylists.bind(this);
  }

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

  removeTrack(track) {
    let playlist = this.state.playlistTracks;
    let newPlaylist = playlist.filter((playTrack) => playTrack.id !== track.id);
    this.setState({ playlistTracks: newPlaylist });
  }

  updatePlaylistName(name) {
    this.setState({ playlistName: name });
  }

  savePlaylist() {
    const trackUris = this.state.playlistTracks.map((track) => track.uri);
    Spotify.savePlaylist(this.state.playlistName, trackUris).then(() => {
      this.setState({
        playlistName: "New Playlist",
        playlistTracks: [],
      });
    });
  }

  // keep search after url updated

  componentDidMount() {
    Spotify.getAccessToken();
  }

  getLocalPlaylists() {
    Spotify.getPlaylist().then((playlistLists) => {
      let newList = playlistLists.items.map((playlist) => {
        return {
          name: playlist.name,
          id: playlist.id,
        };
      });
      this.setState({ playlistLists: newList });
    });
  }

  search(term) {
    Spotify.search(term).then((searchResults) => {
      // filters results in order not to show tracks already in the playlist
      searchResults = searchResults.filter((track) => {
        return this.state.playlistTracks.every((el) => el.uri !== track.uri);
      });

      this.setState({ searchResults: searchResults, searchInput: term });
    });
  }

  render() {
    return (
      <div>
        <h1>
          Ja<span className="highlight">mmm</span>ing
        </h1>
        <div className="App">
          {<SearchBar onSearch={this.search} />}
          <div className="App-playlist">
            {
              <SearchResults
                searchResults={this.state.searchResults}
                onAdd={this.addTrack}
              />
            }
            {
              <Playlist
                playlistName={this.state.playlistName}
                playlistTracks={this.state.playlistTracks}
                onRemove={this.removeTrack}
                onNameChange={this.updatePlaylistName}
                onSave={this.savePlaylist}
              />
            }
            {
              <PlaylistSpotify
                getLocalPlaylists={this.getLocalPlaylists}
                playlistLists={this.state.localPlaylists}
              />
            }
          </div>
        </div>
      </div>
    );
  }
}

export default App;

PlaylistSpotify

import React from "react";

import SingleCurPlaylist from "../SingleCurPlaylist/SingleCurPlaylist";

import "./PlaylistSpotify.css";

class PlaylistSpotify extends React.Component {
  constructor(props) {
    super(props);
    this.renderList = this.renderList.bind(this);
  }

  renderList() {
    this.props.getLocalPlaylists();
  }

  render() {
    return (
      <div className="PlaylistSpotify">
        <h2>Local Playlists</h2>
        <button className="Playlist-save" onClick={this.renderList}>
          Get your local playlist
        </button>
        {this.props.playlistLists.map((singlePlay) => (
          <SingleCurPlaylist name={singlePlay.name}/>
        ))}
      </div>
    );
  }
}

export default PlaylistSpotify;

Answer 1

You are referencing this.state.localPlaylists for the playlistLists prop in the PlaylistSpotify component

<PlaylistSpotify
  getLocalPlaylists={this.getLocalPlaylists}
  playlistLists={this.state.localPlaylists}
/>

... however, in your callback you are updating playlistLists

  getLocalPlaylists() {
    Spotify.getPlaylist().then((playlistLists) => {
      let newList = playlistLists.items.map((playlist) => {
        return {
          name: playlist.name,
          id: playlist.id,
        };
      });

      // update this to: this.setState({ localPlaylists: newList })
      this.setState({ playlistLists: newList });
    });
  }

Answer 2

it looks like in the functiongetLocalPlaylists you do not ever update localPlaylists in state. You are updating playlistLists, however you are passing localPlaylists to the child component localPlaylist. I am not sure if this is intended. But Since you never update localPlaylists, the child never gets updated.

Answer 3

In your App.js, you don't use this.state.playlistLists

  getLocalPlaylists() {
    Spotify.getPlaylist().then((playlistLists) => {
      let newList = playlistLists.items.map((playlist) => {
        return {
          name: playlist.name,
          id: playlist.id,
        };
      });
      this.setState({ playlistLists: newList });
    });
  }

You are updating this.state.playlistLists, but it is not used anywhere.