How to pass this.varible to HTML within class extends React.Component?-CodePudding

I am currently using the react-youtube library within one of my react objects. It contains some data that I would like to display on the screen.

import YouTube from 'react-youtube';

class MediaCompnent extends React.Component {
  _onReady(event) {
    event.target.playVideo();
    this.myTitle = event.target.videoTitle;
  }

  render() {
    const opts = {
      height: '450',
      width: '650',
      playerVars: {
        autoplay: 1,
      },
    };

    const activeTitle = this.myTitle;

    return (
      <div className="media-area">
        <div className="video-box">
          <div className="video-title">{activeTitle}</div>
          <YouTube
            videoId={this.props.activeMediaUrl}
            opts={opts}
            onReady={this._onReady}
          />
        </div>
        <div className="media-description-area">
          {this.props.activeDescription}
        </div>
      </div>
    );
  }
}

export default MediaCompnent;

Currently I am passing the event.target to the _onReady function so that it can be read every time that the video is refreshed or one of the props changes. event.target returns an object.

I am attempting to read the title data and pass it into this.myTitle I am then trying to store it in a const within my render function and then setting this title within my HTML.

Currently, the activeTitle will not display to screen, but I am managing to print the desired string to the console. What is necessary to pass the variable correctly in order to display in the HTML?

Thanks

CodePudding user response：

use setState() and refer this.state.myTitle. But I am bit worried that if you do that rerender will trigger that YouTube component to rereder

  _onReady(event) {
    event.target.playVideo();
    this.setState({myTitle:  event.target.videoTitle});
  }

CodePudding user response：

Mateusz Rorat has the right idea but there is more to it.

You need to have a constructor initialize this.state and you need to wire up the _onReady handler a bit differently so that the this variable refers to the class instance's this even inside the _onReady handler function. Also you need to retrieve myTitle slightly differently since now it's stored inside this.state (not inside this directly).

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

class MediaComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  _onReady(event) {
    event.target.playVideo();
    this.setState({
      myTitle: event.target.videoTitle,
    });
  }

  render() {
    const opts = {
      height: '450',
      width: '650',
      playerVars: {
        autoplay: 1,
      },
    };

    const activeTitle = this.state.myTitle;

    return (
      <div className="media-area">
        <div className="video-box">
          <div className="video-title">{activeTitle}</div>
          <YouTube
            videoId={this.props.activeMediaUrl}
            opts={opts}
            onReady={(event) => this._onReady(event)}
          />
        </div>
        <div className="media-description-area">
          {this.props.activeDescription}
        </div>
      </div>
    );
  }
}

export default MediaComponent;