title: How to print a Component in React?
body: <p>I am making a simple resume generation app.</p>
  <p><strong>Index.js:</strong></p>
  <pre><code>import ReactDOM from &quot;react-dom&quot;;
  import Resume from &quot;../components/resume&quot;;
  import React, { useRef } from &quot;react&quot;;
  import { useReactToPrint } from &quot;react-to-print&quot;;
  
  const App = () =&gt; {
    const componentRef = useRef();
    const handlePrint = useReactToPrint({
      content: () =&gt; componentRef.current
    });
  
    return (
      &lt;div className=&quot;bg-gray-200 p-6&quot;&gt;
        &lt;button
          type=&quot;button&quot;
          className=&quot;bg-gray-500 border border-gray-500 p-2 mb-4&quot;
          onClick={handlePrint}
        &gt;
          {&quot; &quot;}
          Print Resume{&quot; &quot;}
        &lt;/button&gt;
        &lt;Resume ref={componentRef} /&gt;
      &lt;/div&gt;
    );
  };
  
  const rootElement = document.getElementById(&quot;root&quot;);
  ReactDOM.render(&lt;App /&gt;, rootElement);
  </code></pre>
  <p>The resume gets generated from the <code>components/resume.js</code> file and it is a <strong>functional component</strong>..</p>
  <p>I am using the <a href="https://www.npmjs.com/package/react-to-print" rel="nofollow noreferrer"><strong>react-to-print</strong></a> library to print the resume component alone.</p>
  <p>Also took the reference from <a href="https://codesandbox.io/s/rzdhd" rel="nofollow noreferrer">here</a> ..</p>
  <p>But in my application, If I click the <code>Print Resume</code> , then the resume doesn't gets printed..</p>
  <p>Instead I get the following warnings,</p>
  <blockquote>
  <p><strong>Warning: Function components cannot be given refs. Attempts to access
  this ref will fail. Did you mean to use React.forwardRef()?</strong></p>
  </blockquote>
  <p>and another warning as,</p>
  <blockquote>
  <p>For &quot;react-to-print&quot; to work only Class based components can be
  printed.</p>
  </blockquote>
  <p><strong>Complete Working Example:</strong></p>
  <blockquote>
  <p><strong><a href="https://codesandbox.io/s/tailwind-react-sandbox-forked-uivc8" rel="nofollow noreferrer">https://codesandbox.io/s/tailwind-react-sandbox-forked-uivc8</a></strong></p>
  </blockquote>
  <p>Please try clicking the <code>Print Resume</code> button in the above link where it doesn't print the resume.</p>
  <p>Could you please help me to print the generated resume? Thanks in advance..</p>