componentRef.current Error

[hisamafahri]

I am using Next.js and trying to print a component using react-to-print.

Here's my code:

import { NextPage } from 'next'
import Head from 'next/head'
import React, { useRef } from 'react'
import ReactToPrint from 'react-to-print'
import PdfReport from '../components/PdfReport'

const Report: NextPage = () =>  {
    const componentRef = useRef()

    return (
        <div>
                <ReactToPrint
                    trigger={() => <button>Print this out!</button>}
                    content={() => componentRef.current}
                />
                <PdfReport ref={componentRef} />
        </div>
    )
}

export default Report

But I am getting the following errors:

No overload matches this call.
  Overload 1 of 2, '(props: IReactToPrintProps | Readonly<IReactToPrintProps>): ReactToPrint', gave the following error.
    Type 'undefined' is not assignable to type 'ReactInstance | null'.
  Overload 2 of 2, '(props: IReactToPrintProps, context: any): ReactToPrint', gave the following error.
    Type 'undefined' is not assignable to type 'ReactInstance | null'.

Any ideas how to solve this?

[hisamafahri]

I think this error's solution should be addressed in the docs.

Solution #401

[MatthewHerbst]

I think this error's solution should be addressed in the docs

PRs are welcome 😄