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

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.

CodePudding user response：

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.

CodePudding user response：

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