score:11

Accepted answer

react doesn't know which video to update unless key property for each video is provided.

so when you set the key prop for the video to something unique, say url pass to the player, it should work.

const landingpagevideoplayer = ({ url, isactive }) => {
  const playerclassname = `video-player ${
    isactive ? "video-player--is-active" : null
  }`;

  return (
         ..... 👇 .....
    <video key={url} classname={playerclassname} autoplay loop muted>
      <source src={url} type="video/mp4" />
    </video>
  );
};

check out the working demo.
edit so.answer.57235013

for more information how the key property works, check out the official documentation list and keys.

the first sentence reads,

keys help react identify which items have changed, are added, or are removed. keys should be given to the elements inside the array to give the elements a stable identity

in your case, you have two videos (which is actually a list of two items), so to help react which video has changed, key would help react to identify which video has changed.

score:1

add key={this.state.url} like this

<div classname="container">
                <div classname="row">
                    <div classname="col-8">
                        <video width="720" key={this.state.url} height="540" controls >
                            <source src={this.state.url} type="video/mp4" />

                        </video>
                        <h1>{this.state.url}</h1>

Related Query

More Query from same tag