How can I access conditionally rendered elements from the DOM which have not been rendered yet in Re-CodePudding

I have a React application that opens a modals conditionally when buttons are pressed. I want a way to access these modals even when they haven't been rendered yet so that I can save the modals as an image in one go using html2canvas. I am able to save the modals as an image individually after I open them but I want to make the process more efficient by saving all the images of the different modals in one go. How can I do this when I have no access to the different modal element IDs since they have not been rendered yet?

This is the current code I have to save the image of the different modals separately after I have opened them:

if (elementId) {
    console.log(elementId);
    const screenshotTarget = document.getElementById(elementId);
    console.log(screenshotTarget);
    html2canvas(screenshotTarget, { scale: 0.9 }).then((canvas) => {
      canvas.getContext("2d", {
        willReadFrequently: true,
      });
      const base64image = canvas.toDataURL("image/jpeg");
      download(base64image, elementId   ".jpeg", "image/jpeg");
    });
  }

I have considered having all the different modals just load when they are created and then set the display property to none but I don't know if it is inefficient to just render all the modals at once and just hide them. Is there a better option than this?

CodePudding user response：

I fixed this by essentially just rerendering the components I wanted to access when the button was pressed. I found no other way to access the components which are rendered conditionally so this was the only viable solution I could find