Inject React Component as content

[jojojoleeleelee]

Hello! I was wondering, is it possible to add a react component as the content?

I added the component inside the overlay like so -

 this.player.overlay({
      content: <SomeReactComponent />,
      align: 'bottom-left',
      overlays: [{
        start: 'play',
        end: 'end'
      }]
    });

and the SomeReactComponent is just a react component for a dynamic image renderer that looks like this

import like from './like.png';
import love from './love.png';
import neutral from './neutral.png';

class SomeReactComponent extends Component {
  getImage(pic) {
    const image = pic;
    return image;
  }

  render() {
    const pic = [love, like, neutral];
    
    return (
        <div>
          { sentimentsArray.map(sentiment =>
            <img src={this.getImage(pic)} style={{ width: '75%', height: '75%', objectFit: 'scale-down' }} />
          )}
        </div>
    );
  }
}

When i call this.player.overlay in my console, it says the overlays.options.content is a Symbol of React.element, however, I'm not getting anything as an overlay

[dom-paul]

Hey, Where you able to figure how to achieve this? I am looking for something similar

[josewweee]

what i did was.
const plainHtml = SomeReactComponent();
and then.
this.player.overlay({
content: renderToStaticMarkup(plainHtml),
align: 'bottom-left',
overlays: [{
start: 'play',
end: 'end'
}]
});

the problem with this approach is that buttons inside the plainHtml wont work as expected. if you guys have a better way, let me know. thanks