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

How does the current behavior differ from the desired behavior? — Rocky Sims, Aug 02 '22 at 11:20
You have to make it a `state` variable otherwise it won't automatically re-render when the variable changes. — Kokodoko, Aug 02 '22 at 11:33
I am trying, but the error stated is.... React Hook "useState" cannot be called in a class component. React Hooks must be called in a React function component or a custom React Hook function react-hooks/rules-of-hooks — Kevin, Aug 02 '22 at 11:45

score 1 · Accepted Answer · answered Aug 02 '22 at 21:02

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;

score 0 · Answer 2 · answered Aug 02 '22 at 12:46

0

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});
  }

answered Aug 02 '22 at 12:46

Mateusz Rorat

127
8

this crashes the program unfortunately – Kevin Aug 02 '22 at 12:52

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

2 Answers2