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

Question

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

Answer 1

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;