Outputting multiple documents results in merging to one document in jsPDF

Question

I'm building a simple web-app in React where people need to fill in forms and when ready, render it to a PDF to send to the customer.

I'm using jsPDF in React and everything works fine except that; when i output 1 document there is no problem, but when i output the second one (when the first one is outputted), this document is merged with the data of the first document, this keeps happening with every document that i output after

here is my code so far;

import React from "react";
import jsPDF from "jspdf";

const logo = "/images/logo.png"

let PDF = new jsPDF({
  orientation: "p",
  unit: "mm",
  format: "a4",
  putOnlyUsedFonts: true
});

const GetInspectionGroups = value => {
  const result = value.map((g, groupIndex) => {
    const question = g.questions.map((q, questionIndex) => {
      return (
        //QUESTIONS
        PDF.setFontSize(12),
        PDF.text(q.name, 20, 40 + questionIndex * 10),
        PDF.line(20, 43 + questionIndex * 10, 180, 43 + questionIndex * 10),
        PDF.setFontSize(12),
        PDF.text(q.value, 165, 40 + questionIndex * 10)
      );
    });
    return (
      //PAGES
      PDF.setFontSize(15),
      PDF.setFont("Helvetica", "Bold"),
      PDF.text(g.name, 20, 20),
      PDF.setFont("Helvetica", ""),
      question,
      PDF.line(20, 280, 180, 280),
      PDF.addPage({ format: "a4", orientation: "p" })
    );
  });
  return result;
};

const clientDetails = props => {
  return (
    PDF.text(props.projectNumber, 100, 30),
    PDF.setFont("Helvetica", "Bold"),
    PDF.text(props.name, 100, 23),
    PDF.setFont("Helvetica", "")
  );
};

const RenderPDF = props => {
  let project = props.location.state;
  PDF.addImage(logo, "JPEG", 10, 0);
  clientDetails(project);
  PDF.addPage({ format: "a4", orientation: "p" });
  GetInspectionGroups(project.inspectionGroups);
  //PDF.save("test.pdf");
  PDF.output("pdfobjectnewwindow");
  return <div>test</div>;
};

for linking i'm using react-router-dom as following, i'm getting the data from the props;

<IconButton
                  component={Link}
                  to={{
                    pathname: `/pdf/${this.state.project._id}`,
                    state: this.state.project
                  }}
                  edge="end"
                  aria-label="View"
                >

i'm thinking that the data of the generated PDF is stored somewhere, i can't find it to clear it.

I would like to render al the documents seperate, hope you guys can help :)

Answer 1

After posting the question i fixed it,

Problem was that the code block below was in the global scope..

 let PDF = new jsPDF({
    orientation: "p",
    unit: "mm",
    format: "a4",
    putOnlyUsedFonts: true
  });

-

Here is the code for reference;

import React from "react";
import jsPDF from "jspdf";
import { Redirect } from "react-router-dom";

const logo = '/images/logo.png';

const GetInspectionGroups = (value, PDF) => {
  const result = value.map((g, groupIndex) => {
    const question = g.questions.map((q, questionIndex) => {
      return (
        //QUESTIONS
        PDF.setFontSize(12),
        PDF.text(q.name, 20, 40 + questionIndex * 10),
        PDF.line(20, 43 + questionIndex * 10, 180, 43 + questionIndex * 10),
        PDF.setFontSize(12),
        PDF.text(q.value, 165, 40 + questionIndex * 10)
      );
    });
    return (
      //PAGES
      PDF.setFontSize(15),
      PDF.setFont("Helvetica", "Bold"),
      PDF.text(g.name, 20, 20),
      PDF.setFont("Helvetica", ""),
      question,
      PDF.line(20, 280, 180, 280),
      PDF.addPage({ format: "a4", orientation: "p" })
    );
  });
  return result;
};

const clientDetails = **(props, PDF)** => {
  return (
    PDF.text(props.projectNumber, 100, 30),
    PDF.setFont("Helvetica", "Bold"),
    PDF.text(props.name, 100, 23),
    PDF.setFont("Helvetica", "")
  );
};

const RenderPDF = props => {
  let PDF = new jsPDF({
    orientation: "p",
    unit: "mm",
    format: "a4",
    putOnlyUsedFonts: true
  });

  let project = props.location.state;
  PDF.addImage(logo, "JPEG", 10, 0);
  clientDetails(project, PDF);
  PDF.addPage({ format: "a4", orientation: "p" });
  GetInspectionGroups(project.inspectionGroups, PDF);
  // PDF.save();
  PDF.output("dataurlnewwindow");
  return <Redirect to={`/projects`} />;
};

export default RenderPDF;