Using window.print() in react

Question

I'm trying to print the content of a function in react but getting Uncaught TypeError: Cannot read property 'innerHTML' of null

function:

export default function Home(props) {
    return (
       <h4>Some other contents</h4>
       <button className='btn' type='button' onClick={printDiv('printMe')}>Print</button>
   )
}

function Data(props) {
   return (
   <div id='printMe'>
      <p>Some contents in here returning from my database</p>
      <p>On an html table</p>
   </div>
  )
}

function printDiv(divName) {
  let printContents = document.getElementById(divName).innerHTML;
  let originalContents = document.body.innerHTML;

  document.body.innerHTML = printContents;

  window.print();

  document.body.innerHTML = originalContents;
}

So far, once the application is loaded I get the error. I'm not sure what's causing the issues.

The value of onClick has to be a function; what happens if you pass a function? Like onClick={() => printDiv('printMe')}. — rishat
– rishat, Commented Nov 30, 2017 at 21:28

Zerium · Accepted Answer · 2017-11-30 21:29:08Z

1

I assume this script is located inside your <head> tag. Are you running your code after the page loads?

If you want to access the DOM, you need to make sure that the DOM element(s) you're trying to access actually exist.

Try doing this on the script tag:

<script src="path/to/your/script.js" defer></script>

The defer attribute makes it run after the page finishes loading; hence, it'll have proper access to the DOM.

answered Nov 30, 2017 at 21:29

Zerium

17.4k33 gold badges120 silver badges187 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using window.print() in react

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related