title: Rendering a canvas object received from props
body: <p>Good day!</p>
  
  <p>I am new to React and html2canvas. I am making an app which will take "screenshots" of my DOM using html2canvas then store it to an array of screenshots which will then be also rendered on the screen.</p>
  
  <p>I am storing each <code>&lt;canvas&gt;</code> object received from the html2canvas promise to an array then pass it to my <code>ScreenshotsContainer</code> component which passes the array to the <code>Screenshots</code> component. The <code>Screenshots</code> component will then map the array of <code>&lt;canvas&gt;</code> objects to individual <code>Screenshot</code> components.</p>
  
  <p>In App.js, I am calling the html2canvas function then pass the array to ScreenshotsContainer component</p>
  
  <pre><code>import React, { Component } from 'react';
  import ScreenshotsContainer from './containers/ScreenshotsContainer/ScreenshotsContainer'
  import html2canvas from 'html2canvas';
  
  import './App.css';
  
  class App extends Component {
    state = {
      canvasArray: []
    }
  
    getScreenshotHandler = () =&gt; {
      console.log("[Canvas Array from state length:]" + this.state.canvasArray.length)
      let canvasArray = this.state.canvasArray;
  
      html2canvas(document.body).then((canvas) =&gt; {
        canvasArray.push(canvas)
      });
  
      console.log("[Canvas Object value: ]" + canvasArray);
      this.setState({ canvasArray: canvasArray })
  
    }
  
    render() {
  
      return (
        &lt;React.Fragment&gt;
          &lt;button onClick={this.getScreenshotHandler}&gt;Get Screenshot&lt;/button&gt;
          &lt;ScreenshotsContainer canvasArray={this.state.canvasArray} /&gt;
        &lt;/React.Fragment&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  
  <p>The ScreenshotsContainer component will pass the received array to the Screenshots component:</p>
  
  <pre><code>    import React, { Component } from 'react';
  import './ScreenshotsContainer.css'
  import Screenshots from '../../components/Screenshots/Screenshots';
  
  class ScreenshotsContainer extends Component {
  
      render() {
          return (
              &lt;div className="ScreenshotsContainer"&gt;
                  &lt;Screenshots canvasArray={this.props.canvasArray} /&gt;
              &lt;/div&gt;
          );
      }
  }
  export default ScreenshotsContainer;
  </code></pre>
  
  <p>The Screenshots component will map the array and pass each canvas object to the Screenshot component:</p>
  
  <pre><code>import React, { Component } from 'react';
  import Screenshot from './Screenshot/Screenshot';
  
  class Screenshots extends Component {
      render() {
          const screenshots = this.props.canvasArray.map(canvas =&gt; {
              return (
                  &lt;Screenshot
                      key={Math.random}
                      canvasObj={canvas}
                  /&gt;
              )
          })
          return (
              &lt;React.Fragment&gt;
                  {screenshots}
              &lt;/React.Fragment&gt;
          );
      }
  }
  export default Screenshots;
  </code></pre>
  
  <p>Here is the Screenshot component</p>
  
  <pre><code>import React from 'react';
  import './Screenshot.css';
  
  const screenshot = (props) =&gt; (
      &lt;div className="Screenshot" &gt;
          &lt;canvas ref={props.canvasObj} style={{
              width: '10%',
              height: '10%'
          }} /&gt;
      &lt;/div&gt;
  );
  
  export default screenshot;
  </code></pre>
  
  <p>What I actually get when pressing the button:</p>
  
  <p><a href="https://i.stack.imgur.com/PMIoQ.png" rel="nofollow noreferrer">Actual screenshot of my result</a>
  I was wondering which part went wrong. Any help would be appreciated.</p>