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?