Re-render with playlist fails

[LRharlekin]

(There was a similar issue #97 opened by @rmammina in 2017. Unfortunately it was closed shortly after without any answers.)

Note: I am quite new to coding in general, so have mercy :-)

I'm basically trying to build a stripped-down version of this website (but with comedy clips instead of memes) as a personal project to develop my skills.

When the component mounts, the .loadPlaylist() loads the playlist (in this case an array of video IDs) correctly. However, when the state changes, the player simply keeps playing the current/initial playlist, even though there are new .customPlaylist and .playlistIndex properties attached to the changed selectedComedian piece of state.

What can I do to switch between different selectedComedian pieces of state and the attached playlists respectively?

Here is the entire component's code:

import React from "react";
import { connect } from "react-redux";
import YouTube from "react-youtube";

class VideoPlayer extends React.Component {`
  constructor(props) {
    super(props);
  }

  onPlayerReady = event => {
    const player = event.target;
    player
      .loadPlaylist({
        playlist: this.props.selectedComedian.customPlaylist
      })
      .playVideoAt(this.props.selectedComedian.playlistIndex);
  };

  render() {
    const opts = {
      height:"390",
      width:"640",
    };
    return (
      <YouTube
        opts={opts}
        onReady={this.onPlayerReady}
        onStateChange={this.onPlayerStateChange}
      />
    );
  }
}

const mapStateToProps = state => {
  return { selectedComedian: state.selectedComedian };
}

export default connect(mapStateToProps)(VideoPlayer);

[ruisaraiva19]

@LRharlekin looks like you are using an incorrect property inside of the loadPlaylist method parameter. On the official documentation, when using the object syntax, you can pass the playlist via the list property instead of playlist.

Here is a CodeSanbox demo: https://codesandbox.io/s/crazy-heyrovsky-uxpwc