How to render a YouTube video upon button click in React? - reactjs

Question

I am new to React and am trying to build a video player page. Currently I have a super basic page in mind — I'd like to have one button that, when clicked, renders a YouTube video.
I've followed a resource that uses the npm react-player package so that I can just embed a Youtube Player as follows:
function YouTubePlayer () {
return (
<div>
<ReactPlayer
url="https://www.youtube.com/watch?v=ug50zmP9I7s"
/>
</div>
)
}
export default YouTubePlayer
However, instead of having the video display on the page as soon as it loads, I want it to only load when the button is clicked. I created a button and an event handler like this:
import { Component } from 'react';
import ReactPlayer from 'react-player';
class YouTubePlayer extends Component {
constructor(props) {
super(props);
}
handleYouTubeClick = () => {
return (
<div>
<ReactPlayer url="https://youtu.be/OXHCt8Ym9gw"/>
</div>
);
}
render() {
return (
<div>
<p>Video Player</p>
<button onClick={this.handleYouTubeClick}>YouTube</button>
</div>
);
}
export default YouTubePlayer
but no video gets rendered. Do I have to do something with states? I do not know how I would go about doing so. Again, I am very new to React, so please let me know if I am approaching this completely wrong. Thanks.

Answer 1

import { Component } from "react";
import ReactPlayer from "react-player";
class YouTubePlayer extends Component {
constructor(props) {
super(props);
this.state = {
isClicked: false
};
}
handleYouTubeClick = () => {
this.setState({
isClicked: true
});
};
render() {
return (
<div>
<p>Video Player</p>
<button onClick={this.handleYouTubeClick}>Youtube</button>
{this.state.isClicked && (
<div>
<ReactPlayer url="https://youtu.be/OXHCt8Ym9gw" />
</div>
)}
</div>
);
}
}
export default YouTubePlayer;
Here is the code to solve your problem.

Answer 2

class YouTubePlayer extends Component {
state = {
showYoutube: false,
}
ShowPlayer = () => {
if(this.state.showYoutube) {
return (
<div>
<ReactPlayer url="https://youtu.be/OXHCt8Ym9gw"/>
</div>
);
}
}
handleYouTubeClick = () => {
this.setState({
showYoutube: true,
})
}
render() {
return (
<div>
<p>Video Player</p>
<this.ShowPlayer />
<button onClick={this.handleYouTubeClick}>Youtube</button>
</div>
);
}
}
I hope this will help you.
Thanks