How do I switch from class to function in that case

Question

I'm having trouble getting the code below to function.

All the ways I tried gives problem in event.

import React from 'react'
import YouTube from 'react-youtube';


export default class youtube extends React.Component {

   render() {
      const opts = {
        playerVars: {
          // https://developers.google.com/youtube/player_parameters
          autoplay: 1,
        },
      };

      return (
         <div className={styles.body}>
            <div className={styles.tamanhovideoyoutube}>
               <YouTube className={styles.tamanhovideodentroyoutube} videoId="soXDzGHls_c" opts={opts} title={"title"} onReady={this._onReady}/>
            <h4 className='px-0.5 py-0.5 ml-1 font-bold'>Veja o vídeo no YouTube <a className='text-blue-600' href="https://www.youtube.com/watch?v=soXDzGHls_c">aqui</a> </h4>
            </div>


        </div>    
      )}


   _onReady(event) {
      // access to player in all event handlers via event.target
      event.target.pauseVideo();
    }
  }

I'm having trouble getting the code below to function.

All the ways I tried gives problem in event.

Answer 1

You can pass function directly to Youtube component that will take event. This event fires whenever a player has finished loading and is ready to begin receiving API calls.

The example below shows a sample function for handling this event. The event object that the API passes to the function has a target property, which identifies the player, hence we can directly pauseVideo

import React from "react";
import YouTube from "react-youtube";

export default function App() {
  const opts = {
    playerVars: {
      // https://developers.google.com/youtube/player_parameters
      autoplay: 1
    }
  };

  const _onReady = (event) => {
    event.target.pauseVideo();
  };
  return (
    <div>
      <div>
        <YouTube
          videoId="soXDzGHls_c"
          opts={opts}
          title={"title"}
          onReady={_onReady}
        />
        <h4 className="px-0.5 py-0.5 ml-1 font-bold">
          Veja o vídeo no YouTube{" "}
          <a
            className="text-blue-600"
            href="https://www.youtube.com/watch?v=soXDzGHls_c"
          >
            aqui
          </a>
        </h4>
      </div>
    </div>
  );
}