Refs are not available for stateless components. For 'react-to-print' to work only Class based components can be printed

[karanshah10]

No description provided.

[MatthewHerbst]

What part of that error message do you need help with?

[andydev404]

This's an alternative for stateless component:

import React, { useRef } from 'react';
import ReactToPrint from 'react-to-print';

class ComponentToPrint extends React.PureComponent {
  render() {
    return (
      <table>
        <thead>
          <th>column 1</th>
          <th>column 2</th>
          <th>column 3</th>
        </thead>
        <tbody>
          <tr>
            <td>data 1</td>
            <td>data 2</td>
            <td>data 3</td>
          </tr>
        </tbody>
      </table>
    );
  }
}

const Example = () => {
  const componentRef = useRef();
  return (
    <div>
      <ReactToPrint
        trigger={() => <button>Print this out!</button>}
        content={() => componentRef.current}
      />
      <ComponentToPrint ref={componentRef} />
    </div>
  );
};
export default Example;

[MatthewHerbst]

@andydev404 hooks 💯

[MarkNewcomb1]

Something worth noting: the component you want to print will still need to be a class component. If Example AND ComponentToPrint are both non-class-based, it won't work. I had trouble with this this morning, where in my example, Example was a functional, stateless component and ComponentToPrint was also a functional, stateless component. I kept getting this Refs are not available for stateless components error when clicking on my print link. Taking this error message quite literally, I tried converting my ComponentToPrint to a stateful component using useState while still keeping it a functional component.

Turned out that wasn't good enough. It's not necessarily that it's a stateless component. It's that it's not a class based component.

Interestingly, in my wrestling with this, I tried <h1 ref={componentRef}>HELLO?</h1> and that worked - even though a simple h1 tag is certainly not a class based component.

[MatthewHerbst]

Thanks for the information @MarkNewcomb1 we may need to update our error messages in the hooks world, since previously a functional component had no effective way of maintaining state.

[jianghuaw]

Add my thanks to @MarkNewcomb1. The above information is useful. I met the same problem to print non-class-based component and I finally got it to work by putting the component as the child of <div ref={componentRef} />.

[dmajumder4292]

If one wants to just have functional components, they can refer to the below example:

import React, { useRef } from "react";
import ReactToPrint from "react-to-print";

const ComponentToPrint = React.forwardRef((props, ref) => (
      <table ref={ref}>
        <thead>
          <th>column 1</th>
          <th>column 2</th>
          <th>column 3</th>
        </thead>
        <tbody>
          <tr>
            <td>data 1</td>
            <td>data 2</td>
            <td>data 3</td>
          </tr>
          <tr>
            <td>data 1</td>
            <td>data 2</td>
            <td>data 3</td>
          </tr>
          <tr>
            <td>data 1</td>
            <td>data 2</td>
            <td>data 3</td>
          </tr>
        </tbody>
      </table>
));

const Example = () => {
    const componentRef = useRef();
    return (
      <div>
        <ReactToPrint
          trigger={() => <a href="#">Print this out!</a>}
          content={() => componentRef.current}
        />
        <ComponentToPrint ref={componentRef} />
      </div>
    );
}

export default Example;

[Farnis]

I got the correct answer with the following solution and bypassed this error

import React, { useRef } from "react";
import ReactToPrint from "react-to-print";

export default function PrinterWrapper({ children }) {
    const linkToPrint = () => {
        return (
            <button>Click To PrintOF Body</button>
        )
    }
    const componentRef = useRef();
    return (
        <>
            <ReactToPrint trigger={linkToPrint} content={() => componentRef.current} />
            <div ref={componentRef}>
                {children}
            </div>
        </>
    );
}

[opinyinRob]

I followed the examples given and still get the error message. Could it be because the wrapped component has some stateless components in it?

[JasonCabral131]

can someone help me how to trigger an event if success printing or not using useReactToPrint
Thanks in advance

[MatthewHerbst]

can someone help me how to trigger an event if success printing or not using useReactToPrint Thanks in advance

@JasonCabral131 As called out in the README, unfortunately the onAfterPrint event is fired when the user closes the print dialog regardless of what action (print, cancel) they have taken. This is a browser limitation and not something react-to-print can solve. I am in the very slow process of making a WC3 Print API proposal, but that will likely take years before becoming a reality 😢

[ahmad-ahmadnejad]

I Fix This Issue with This Approach :
move ref attribute from my Component to a div . And it was well resolved .