javascriptreactjsclassreact-class-based-component

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


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


Solution

  • 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;