Import function into react component and use it in onSubmit-CodePudding

I wish to generate a pdf which uses formData (coming from form inputs) and data (coming from react context). So different sources of data coming together in on pdf.

I have a component Form which has an onSubmit function, which basically has a task to generate this pdf. Below just the relevant part of it:

export const Form = () => {
  const onSubmit = (formData) => {
    generatePdf(formData);
  };
}

In a different file I have my pdf logic, which I import into Form component:

import { jsPDF } from "jspdf";

import { useFormData } from "../context";

export default function generatePdf (formData) {
    const data = useFormData();
    const chosenContract = Object.values(data.contract);
    const doc = new jsPDF();
    doc.setFontSize(14)
    doc.setFont('undefined', 'bold'),
    doc.text(10, 20, 'Hallo! Folgender Vertrag wurde gerade online abgeschlossen: ');
    doc.setFontSize(10);
    doc.setFont('undefined', 'normal'),
    doc.text(chosenContract[1]   ',', 10, 35);
    doc.text(chosenContract[2]   ' '   '€/monatlich'   ',', 10, 40);
    doc.text(chosenContract[4], 10, 45);
    doc.setFontSize(14)
    doc.setFont('undefined', 'bold'),
    doc.text(10, 60, 'Der Nutzer hat folgende Daten hinterlassen:');
    doc.setFontSize(10);
    doc.setFont('undefined', 'normal'),
    doc.text(JSON.stringify(formData), 10, 70);
    window.open(URL.createObjectURL(doc.output("blob")))
    { console.log(formData);} 
}

As I am a beginner, I am a bit lost anyway, how and which arguments to pass into generatePdf, so that it works in my Form component. For now I just get an Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

I also tried to pass data and formData into generatePdf function function generatePdf (data,formData) and define data in Form component, but then I got undefined in generatePdf for const chosenContract = Object.values(data.contract);.

Originally I had my code all in Form and it obviously worked, but as the Form component gets longer, I was aming to follow the clean code rules and outsorce my pdf logic. The original code below:

export const Form = () => {
  const { data } = useFormData();

  const onSubmit = (formData) => {
    const chosenContract = Object.values(data.contract);
    const doc = new jsPDF();
    doc.setFontSize(14)
    doc.setFont('undefined', 'bold'),
    doc.text(10, 20, 'Hallo! Folgender Vertrag wurde gerade online abgeschlossen: ');
    doc.setFontSize(10);
    doc.setFont('undefined', 'normal'),
    doc.text(chosenContract[1]   ',', 10, 35);
    doc.text(chosenContract[2]   ' '   '€/monatlich'   ',', 10, 40);
    doc.text(chosenContract[4], 10, 45);
    doc.setFontSize(14)
    doc.setFont('undefined', 'bold'),
    doc.text(10, 60, 'Der Nutzer hat folgende Daten hinterlassen:');
    doc.setFontSize(10);
    doc.setFont('undefined', 'normal'),
    doc.text(JSON.stringify(formData), 10, 70);
    window.open(URL.createObjectURL(doc.output("blob")))
    console.log(formData)
    //makeContract();
  };
}

CodePudding user response：

You could use something between the two. The useFormData hook necessarily needs to be called in a React component, i.e. the Form component.

I suggest keeping the utility logic separate for maintainability and separation of concerns, and passing in the data from the hook.

generatePdf utility

import { jsPDF } from "jspdf";

export default function generatePdf (formData, data) {
  const chosenContract = Object.values(data.contract);
  const doc = new jsPDF();

  doc.setFontSize(14);
  doc.setFont('undefined', 'bold');
  doc.text(10, 20, 'Hallo! Folgender Vertrag wurde gerade online abgeschlossen: ');
  doc.setFontSize(10);
  doc.setFont('undefined', 'normal');
  doc.text(chosenContract[1]   ',', 10, 35);
  doc.text(chosenContract[2]   ' '   '€/monatlich'   ',', 10, 40);
  doc.text(chosenContract[4], 10, 45);
  doc.setFontSize(14);
  doc.setFont('undefined', 'bold');
  doc.text(10, 60, 'Der Nutzer hat folgende Daten hinterlassen:');
  doc.setFontSize(10);
  doc.setFont('undefined', 'normal');
  doc.text(JSON.stringify(formData), 10, 70);
  window.open(URL.createObjectURL(doc.output("blob")));
}

Form

import { useFormData } from "../context";

export const Form = () => {
  const { data } = useFormData();

  const onSubmit = (formData) => {
    generatePdf(formData, data);
  };

  ...
}