ANTD table Print using ReactToPrint component

Question

I am trying to print ANTD table using ReactToPrint hook, everything seems to work fine, but I want to show some text on top of page before print. means I want to show some text for header purpose, when I am setting the visibility of header component true, its not print on first click, it shows on 2nd click, but I want to show the header on first click and when I print or cancel, header should be hide.

Please help me, Please hit print button two time to see the result in the below link.

https://codesandbox.io/s/usestate-not-updating-data-when-passing-from-parent-functional-component-using-r-forked-xuhnl

Thanks in Advance

Answer 1

When the handlePrint function is called, the ref componentRef points to the previous version of the component. printHeaderVisible only becomes true at the time of the next render.

You can try to postpone the print call until the next render like this

const reactToPrintFunc = useReactToPrint({
  content: () => componentRef.current,

  onBeforeGetContent: () => setprintHeaderVisible(true),
  onAfterPrint: () => setprintHeaderVisible(false)
});

const handlePrint = () => {
  setTimeout(reactToPrintFunc, 0);
};

or do as advised in this issue

const handlePrint = useReactToPrint({
  content: () => componentRef.current,

  onBeforeGetContent: () => {
    return new Promise((resolve) => {
      setprintHeaderVisible(true);
      resolve();
    });
  },
  onAfterPrint: () => setprintHeaderVisible(false)
});