React Marathon - Launch Academy

App.js

import React from 'react';
import PlaylistCollection from './PlaylistCollection';
import SongCollection from './SongCollection';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedPlaylistId: props.data.selectedPlaylistId
    };
//     How does this handler know what it is handleing?
    this.handlePlaylistClick = this.handlePlaylistClick.bind(this);
  }

//   Where can it get id from? I don't understand how to pass it the playlist id
//   from the playlistCollection class.
  handlePlaylistClick(id) {
    this.setState({selectedPlaylistId: id});
  }

  render() {
    let data = this.props.data;
    console.log(data);

    let selectedPlaylistSongIds = data.playlists[this.state.selectedPlaylistId-1].songs;

    let filterById = (obj) => {
      return selectedPlaylistSongIds.includes(obj.id);
    };

    let selectedPlaylistSongs = data.songs.filter(filterById);

    return (
      <div className="App row">
        <div className="column small-6">
          <h1>Playlists</h1>
          <PlaylistCollection
            playlists={data.playlists}
            selectedPlaylistId={this.state.selectedPlaylistId}
            handlePlaylistClick={this.handlePlaylistClick}
          />
        </div>
        <div className="column small-6">
          <h1>Song</h1>
          <SongCollection
            songs={selectedPlaylistSongs}
            selectedSongId={data.selectedSongId}
          />
        </div>
      </div>
    );
  }
}

export default App;

PlaylistCollection.js

import React from 'react';
import Playlist from './Playlist';

// I assume this will eventually become a constant insted of a class if it has no need
// to be stateful.
class PlaylistCollection extends React.Component{
  constructor(props) {
    super(props);
    this.state = {};
  }

  render(){
    let playlists = this.props.playlists.map((playlist) => {
      let classString = "";
      if (playlist.id === this.props.selectedPlaylistId) {
        classString = "selected";
      } else {
        classString = "";
      }

  //    playlist.id is what determines the selceted ID so how do I pass that up to 
  //    the parent object?
      let onPlaylistClick = this.props.handlePlaylistClick(playlist.id);

      return (
        <Playlist
          key={playlist.id}
          playlist={playlist}
          classString={classString}
          handlePlaylistClick={onPlaylistClick}
        />
      );
    });

    return (
      <ul>{playlists}</ul>
    );
  }
}

export default PlaylistCollection;