How do I render an `HTMLCanvasElement` in React?

Viewed 4652

I have a utility which produces a thumbnail for a video and returns it as an HTMLCanvasElement. I'd like to render that element in React, like so:

render () {
   return (
      <div className='video-thumbnail'>
         {this.props.videoThumbnailCanvas}
      </div>
   );
}

But when I try that, I get an error that:

Error: Objects are not valid as a React child (found: [object HTMLCanvasElement]).

What's a good way to do this? One idea is to do direct DOM manipulation from componentDidMount (e.g. React.getDOMNode(this).appendChild(this.props.videoThumbnailCanvas)), but that seems rather hack-like.

1 Answers
Related