React-to-print: print multiple components in .map

[Fatdrfrog]

Hi!

I'm trying to print multiple barcodes in map. If I will print them by passing an array inside ComponentToPrint as a prop, and then map inside, it's going to work well and display in the browser all needed elements. But I want to map before, by not sending it inside as a prop. like array.map((e) =>{ComponentToPrint}).
Here is sandbox that doesn't work as I am expecting: https://codesandbox.io/s/elated-aryabhata-ub5zu?file=/src/App.js.
Thanks in advance)

[MatthewHerbst]

Hello! So, you would need to create a new ref for each component. Right now you create a single ref, and then in every iteration of the map it gets overwritten, meaning when the loop is finished the ref just points to the last element in the loop. You could solve this by moving the loop to the parent component.

I will say that having multiple react-to-print components firing from a single event is unhandled behavior, and I'm not sure what will happen. What I think will happen is that each one will print serially, so, you click your button and the first one opens the print dialog, then when you print/cancel that the next one opens the print dialog, etc

[Fatdrfrog]

Thank you @MatthewHerbst! I think I will just leave it as map through each element inside ComponentToPrint.