I am making a simple resume generation app.
Index.js:
import ReactDOM from "react-dom";
import Resume from "../ponents/resume";
import React, { useRef } from "react";
import { useReactToPrint } from "react-to-print";
const App = () => {
const ponentRef = useRef();
const handlePrint = useReactToPrint({
content: () => ponentRef.current
});
return (
<div className="bg-gray-200 p-6">
<button
type="button"
className="bg-gray-500 border border-gray-500 p-2 mb-4"
onClick={handlePrint}
>
{" "}
Print Resume{" "}
</button>
<Resume ref={ponentRef} />
</div>
);
};
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
The resume gets generated from the ponents/resume.js
file and it is a functional ponent..
I am using the react-to-print library to print the resume ponent alone.
Also took the reference from here ..
But in my application, If I click the Print Resume
, then the resume doesn't gets printed..
Instead I get the following warnings,
Warning: Function ponents cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
and another warning as,
For "react-to-print" to work only Class based ponents can be printed.
Complete Working Example:
Please try clicking the Print Resume
button in the above link where it doesn't print the resume.
Could you please help me to print the generated resume? Thanks in advance..
I am making a simple resume generation app.
Index.js:
import ReactDOM from "react-dom";
import Resume from "../ponents/resume";
import React, { useRef } from "react";
import { useReactToPrint } from "react-to-print";
const App = () => {
const ponentRef = useRef();
const handlePrint = useReactToPrint({
content: () => ponentRef.current
});
return (
<div className="bg-gray-200 p-6">
<button
type="button"
className="bg-gray-500 border border-gray-500 p-2 mb-4"
onClick={handlePrint}
>
{" "}
Print Resume{" "}
</button>
<Resume ref={ponentRef} />
</div>
);
};
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
The resume gets generated from the ponents/resume.js
file and it is a functional ponent..
I am using the react-to-print library to print the resume ponent alone.
Also took the reference from here ..
But in my application, If I click the Print Resume
, then the resume doesn't gets printed..
Instead I get the following warnings,
Warning: Function ponents cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
and another warning as,
For "react-to-print" to work only Class based ponents can be printed.
Complete Working Example:
https://codesandbox.io/s/tailwind-react-sandbox-forked-uivc8
Please try clicking the Print Resume
button in the above link where it doesn't print the resume.
Could you please help me to print the generated resume? Thanks in advance..
Share Improve this question asked Sep 2, 2020 at 11:14 UndefinedUndefined 1,0216 gold badges27 silver badges52 bronze badges 4- do you want to convert your ponents to class based instead of function based? – elpmid Commented Sep 2, 2020 at 11:19
- No, I need to have it as functional ponent alone.. Is it not possible to make in functional ponent? – Undefined Commented Sep 2, 2020 at 11:19
- But I have tried npmjs./package/… this one only which is related to functional ponent.. – Undefined Commented Sep 2, 2020 at 11:20
- okay i see i try it – elpmid Commented Sep 2, 2020 at 11:21
2 Answers
Reset to default 11You just have to use React.forwardRef()
const Resume = React.forwardRef((props, ref) => {
// ...
return (
<div className="bg-gray-200 p-6" ref={ref}>
...
</div>
)
})
Forked codesandbox
The ponent you want to print will still need to be a class ponent so I converted the Resume
ponent to a class ponent.
If you try using this as ref to pring <h1 ref={ponentRef}>HELLO?</h1>
that will work even though a simple h1 tag is not class based ponent.
Try this on this edited sandbox of yours.
If you want a solid functional ponent you can migrate the Resume
ponent as the child of <div ref={ponentRef} />
.