title: How to make 'pdf' of a child component without showing it in the parent component?
body: <pre><code>import React ,{useEffect, useRef,useState}from 'react';
  
  import './App.css';
  import html2canvas from 'html2canvas';
  import { jsPDF } from 'jspdf';
  import Fancy_apple from './fancy_apple';
  
  function App() {
    const printRef = React.useRef();
  
    const handleDownloadPdf = async () =&gt; {
      const element = printRef.current;
      const canvas = await html2canvas(element);
      const data = canvas.toDataURL('image/png');
  
      const pdf = new jsPDF();
      const imgProperties = pdf.getImageProperties(data);
      const pdfWidth = pdf.internal.pageSize.getWidth();
      const pdfHeight =
        (imgProperties.height * pdfWidth) / imgProperties.width;
  
      pdf.addImage(data, 'PNG', 0, 0, pdfWidth, pdfHeight);
      pdf.save('print.pdf');
    };
    return (
      &lt;div&gt;
        &lt;button type=&quot;button&quot; onClick={handleDownloadPdf}&gt;
          Download as PDF
        &lt;/button&gt;
        &lt;div&gt;
          &lt;div ref={printRef}&gt;
            &lt;Fancy_apple/&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  
  }
  </code></pre>
  <hr />
  <p>This code works.When I press the button, a pdf of my child component &quot;&lt;Fancy_apple/&gt;&quot; is generated successfully!But I don't want to show the child component &quot;&lt;Fancy_apple/&gt;&quot; on my screen.How do I do it?</p>