React passing props (react-to-print)

Question

Hi I have been using this package react-to-print to print document and it works really well. Passing value to child component works and I can print the dynamic data too. However, I am facing problem to pass dynamic data of array list. It always gets the last item of array. I wrote an example, please take a look at it

import * as React from "react";
import { useRef } from "react";
import ReactToPrint from "react-to-print";

const ComponentToPrint = React.forwardRef((props, ref) => {
  const { value } = props;
  return (
    <div className="print-source" ref={ref}>
      Number {value}
    </div>
  );
});

export default function App() {
  const componentRef = useRef();

  const numbers = [1, 2, 3, 4, 5];

  return (
    <>
      {numbers.map(function (item, index) {
        return (
          <div style={{ display: "flex" }}>
            <li key={index}>{item}</li>
            <ReactToPrint
              trigger={() => <button type="primary">Print</button>}
              content={() => componentRef.current}
            />
            <ComponentToPrint ref={componentRef} value={item} />
          </div>
        );
      })}
    </>
  );
}

Live Demo

Whenever I click the print button, I expect to send the unique value of number to child component but every time I am getting the last value of array. What am I doing wrong?

Answer 1

Because there's just one componentRef instance, which on the order of rendering will have the last rendered value.

Instead each returned component from App needs to have its own instance of componentRef.

This can be achieved if you

1. make the returned html from App a component too (say ComponentToPrintWrapper)
2. have this component its own componentRef.

const ComponentToPrintWrapper = ({ item }) => { // 1.
  const componentRef = useRef(); // 2.

  return (
    <div style={{ display: "flex" }}>
      <li>{item}</li>
      <ReactToPrint
        trigger={() => <button type="primary">Print</button>}
        content={() => componentRef.current}
      />
      <ComponentToPrint ref={componentRef} value={item} />
    </div>
  );
};

3. Use ComponentToPrintWrapper on your App instead

...
export default function App() {
  const numbers = [1, 2, 3, 4, 5];

  return (
    <>
      {numbers.map(function (item, index) {
        return <ComponentToPrintWrapper key={index} item={item} />;
      })}
    </>
  );
...
}

This will ensure each return element has its own componentRef instead.

CodeSandbox