How to remove nodes from a ref in React

1.4k Views Asked by At

I'm using ref to save the reference to a component that later is printed using react-to-print.

This component contains multiple components as children but not all of them should be printed.

This is the code structure:

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

const MainCompoment = () => {
   ...
   const componentRef = useRef();
   // next method is passed to the components somewhere
   const handlePrint = useReactToPrint({
      content: () => componentRef.current
   });
   return (
      <div className="container main" ref={componentRef}>
         <ChildComponent />
         <AnotherChildComponent />
      </div>
   );
}

A console.log was added to log componentRef. Stored it as a global variable and accessing it temp1.current it returns the html:

<div class="container main">...</div>

Now, I want to delete some elements that are not needed to be printed. I see that they are available inside temp1.current.childNodes in console.

Is it a way to delete them in code?

0

There are 0 best solutions below