Blank sheet error react to print

Hi everyone, I have a problem that has already been with me for two days. I’m using pure functional components, I found the following example, but when I press the button, I only get a blank sheet in the print preview, I tried to do it with classes, but it doesn’t give me either, I don’t know if I’m doing something wrong , all this in React JS, my files have a .jsx extension, I’m not sure what the problem is, I’ve already looked for too many solutions and I can’t find what I’m doing wrong, thanks.

I’m using: “react”: “^ 16.8.6”, “react-to-print”: “^ 2.13.0”

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;

[babin93]

Same issue here, The only way I can see something in the print preview is by setting copyStyles={false} which gives an ugly rendering of my content.

Edit:

I had an import of a specifc css file in my js file. By removing that import it started working properly.

[gaisuke]

i’m still experiencing this issue, is anyone had an update to this? my code looks exactly like @lizarragadev . Thanks in advance.

Update 2 hours after i commented this : turns out mine is already showed, but because of my component is white text, it shows a blank preview which is actually there is text on it with white color. so i add copyStyles={false} prop to negate the css