Typescript > Functional component > Example

[michaelpeterlee]

React: 16.14.0

Typescript is not happy, below. Can someone please provide an example implementation.

[MatthewHerbst]

Hello. Can you show your code without the error boxes? Specifically, how did you define the generic that useContext/createContext takes?

[michaelpeterlee]

const MyView: React.FC<IMyView> = (props) => {
  const componentRef = React.useRef();
  return React.useMemo(() => {
    <>
      <ReactToPrint trigger={() => (<div>PRINT</div>)} content={() => componentRef.current} />
      <div>Print this</div>
    </>
  });
}

[MatthewHerbst]

const componentRef = React.useRef(null); should fix the error I believe. This will make the value of componentRef.current null until it makes its way to ReactToPrint.

[michaelpeterlee]

Thanks @MatthewHerbst, it compiles now however a subsequent error fires when printing:

There is nothing to print because the "content" prop returned "null". Please ensure "content" is renderable before allowing "react-to-print" to be called.

[MatthewHerbst]

That's a correct error. You never assign the ref to anything. You need to do: <div ref={componentRef}>Print this</div>

[michaelpeterlee]

That is it @MatthewHerbst, thanks for the support and please remember to update the docs.

[MatthewHerbst]

@michaelpeterlee PRs are welcome 😄

[dglitxh]

If the component to be printed is wrapped in a div, the ref should be placed inside the div and not the component itself.
This worked for me.