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 ponentDidMount (e.g. React.getDOMNode(this).appendChild(this.props.videoThumbnailCanvas)), but that seems rather hack-like.

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 ponentDidMount (e.g. React.getDOMNode(this).appendChild(this.props.videoThumbnailCanvas)), but that seems rather hack-like.

• javascript
• reactjs
• canvas
• html5-canvas

• Do you control the utility function? Can you have it return a <canvas></canvas> JSX element instead? – Danny Delott Commented Jul 20, 2017 at 0:22
• @DannyDelott -- I do control it. It currently looks something like this: ' function getThumb() { let canvas:HTMLCanvasElement = document.createElement('canvas'); let context = canvas.getContext('2d'); if (context) { context.drawImage(videoElement, 0, 0, w, h); } return canvas; } ' I am not sure how I would draw to the context with a JSX element. – allenrabinovich Commented Jul 20, 2017 at 0:35
• I believe you cannot use document.creteElement in your getThumb() – Muhaimin Commented Jul 20, 2017 at 1:47
• @Muhaimin: why not? It does work. – allenrabinovich Commented Jul 20, 2017 at 15:29
• it's wrong practise – Muhaimin Commented Jul 21, 2017 at 5:41

1 Answer 1

I got the same problem and you can solve in 2 ways:

the easy way:

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

the other way i like more (but is personal):

onComponentDidMount() {
  const element = document.getElementById('uniquePlaceHolderKey');
  element.parentNode.replaceChild(this.props.videoThumbnailCanvas, element);
}

render () {
   return (
      <div className='video-thumbnail'>
         <div id="uniquePlaceHolderKey" ></div>
      </div>
   );
}

This second solution lets you load a temp element that you will swap with your own painted canvas instance. I did not found a proper react solution to force the appending of a pre rendered canvas element. There are proper react methods to get an element of a ponent ( like this.findDomNode() ) that are preferable to getElementById since work on the ponent instance.