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.

[el2king]

Is there an example where @MatthewHerbst is proposing actually works? I am trying to print multiple components using .map, but I can also get the first element to be part of the print preview, and not all elements. Any examples would be nice, thanks!

[MatthewHerbst]

@el2king if you can provide some code or ideally a codesandbox I'd be happy to help walk you through it

[el2king]

I actually figured this out, so I'm good for this, but I have another problem in regards to ShadowDOM, and I see an issue related to this (#176), so I'll add a comment there.

[Dmitriy-Krivetsky]

I solved my problem by combining several components into one, and then sending it to print

const handlePrint = useReactToPrint({
   content: () => {
      const tableStat = tableStatRef.current.cloneNode(true);
      const PrintElem = document.createElement('div');
      const statElem = <span>Text</span>;
      PrintElem.innerHTML = statElem;
      PrintElem.appendChild(tableStat);
      return PrintElem;
    },
});

[MatthewHerbst]

I'll add a tip about this to the README since multiple people are running into it, thanks all for letting me know

[ratrateroo]

I tried to combine solutions for creating references to map elements for the bug of react-to-print

import React, { useRef, useEffect } from 'react';
import ReactToPrint from 'react-to-print';
import ComponentToPrint from './ComponentToPrint';
// props content : items = [1, 2, 3, 4, 5, 6];
const Items = (props) => {
	const itemsRef = useRef([]);
	useEffect(() => {
		itemsRef.current = itemsRef.current.slice(0, props.items.length);
	}, [props.items]);
	return props.items.map((el, i) => (
		<div
			key={i}
			style={{
				background: 'yellowgreen',
			}}>
			<ReactToPrint
				trigger={() => (
					<button
						style={{
							background: 'blue',
						}}>
						Print {el}
					</button>
				)}
				content={() => {
					return itemsRef.current[i];
				}}
			/>
			<div style={{ display: 'none' }}>
				<ComponentToPrint
					ref={(el) => (itemsRef.current[i] = el)}
					number={el}
				/>
			</div>
		</div>
	));
};
export default Items;

[MatthewHerbst]

Hi @ratrateroo did you get your solution to work? I've never seen multiple refs saved into an array before, but if that works it's good to know! To be clear, there is no bug, it's just an edge case that requires special handling. I don't think the useEffect you have in your example above is necessary.

[ratrateroo]

Hello, good day. Yes, it's working, I just follow some codes here <https://stackoverflow.com/questions/54940399/how-target-dom-with-react-useref-in-map/55105849> and use it with react to print. Good thing I made it work because I was running out of options. only react to print have the feature that I need for pdf but I encountered the issue on mapped array so I needed to do more research. some solutions on that StackOverflow is not working with react to print I'm not sure because the mapped element got reference already but console error is triggered that it needs the forwarded ref which I have too. If it's a package limitation it is going to be a big problem haha.

…

On Tue, Dec 7, 2021 at 2:33 AM Matthew Herbst ***@***.***> wrote: Hi @ratrateroo <https://github.com/ratrateroo> did you get your solution to work? I've never seen multiple refs saved into an array before, but if that works it's good to know! To be clear, there is no bug, it's just an edge case that requires special handling. I don't think the useEffect you have in your example above is necessary. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#323 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AIRFWEDUPIJINS3ZV6GUUY3UPT6W7ANCNFSM4UKHTNKQ> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.

[stiwari99]

Here is working code for printing each component on separate page

https://codesandbox.io/s/brave-pine-4wncd?file=/src/ComponentToPrintSVG.js

import React from "react";
import Barcode from "react-barcode";
import styled from "styled-components";

const PageBreakWrapper = styled.div`
  && {
    page-break-after: always;
  }
`;

const PrintTemplate = ({ detail }) => {
  return (
    <div>
      <div>
        <Barcode value={detail.code} /*format="EAN13"*/ />
        <br />
        {detail.name && detail.name.substr(0, 42)}
      </div>
      <PageBreakWrapper>&nbsp;</PageBreakWrapper>
    </div>
  );
};
export default class ComponentToPrintSVG extends React.Component {
  render() {
    let printingPages = [];
    const { details } = this.props;
    for (const detail of details) {
      console.log(detail);
      const tempTemplate = <PrintTemplate detail={detail} />;
      printingPages.push(tempTemplate);
    }

    return (
      <div>
        {/* map and create single component for each page */}
        {printingPages}
      </div>
    );
  }
}

[junior3199]

Here is working code for printing each component on separate page

https://codesandbox.io/s/brave-pine-4wncd?file=/src/ComponentToPrintSVG.js

I'm having this problem in 2023 and this solution works best for meee!!! Thank you! 🥳🥳🥳