1

I try to use react-to-print in next js but lib is for react here is what I'm trying to do

here is my index.tsx

import PrintComponent from './PrintComponent';
const Index = ()  => {
  return (
    <>
      <ReactToPrint trigger={() => <button>Print this out!</button>} content={() => React.componentRef} />
      <div className="hidden">
        <PrintComponent ref={el => (React.componentRef = el)} />
      </div>
    </>
  );
};

export default Index;

I try to import PrintComponent here is my PrintComponent

export function PrintComponent() {
  return (
    <div>
      <p>Count is: 1</p>
    </div>
  );
}

export default PrintComponent;

after I click button nothing happen but if I change my index.tsx

import { PrintComponent } from './PrintComponent';

and my PrintComponent look like this

export class PrintComponent extends React.Component {
  render() {
    return (
      <div>
        <p>Count is: 1</p>
      </div>
    );
  }

}

It's work!

anyone can help me explain how it's different and how can I convert them into next

new dev
  • 77
  • 1
  • 6
  • This is not related to Next.js, you can't use `ref`s on function components because they don’t have instances. When using function components you have to use [`ref` forwarding](https://reactjs.org/docs/forwarding-refs.html) to pass a ref through a component to one of its children. – juliomalves Oct 28 '21 at 12:02

0 Answers0