Here is the FormSubmission.tsx component

And here is the error:

you don't have getStaticProps for individual components

you can only have it in page files

hmm ok, true

thanks

I still can't perform db operations. Not sure how to handle this getStaticProps things with the data coming from a form on a child component.

Here is the pages component:

import React, { useState } from "react";
import FormSubmission, { Lead } from "../components/FormSubmission";
import prisma from "../../lib/prisma";
import { GetStaticProps } from "next";
import LandingPageLayout from "@/components/layout/landing-page/LandingPage";

const FormSubmissionPage = () => {
  const [formData, setFormData] = useState<any>({
    name: "",
    email: "",
    company: "",
    employees: "",
  });

  const handleDataChange = (newData: Lead) => {
    setFormData(newData);
  };

  return (
    <LandingPageLayout>
      <FormSubmission onDataChange={handleDataChange} />
    </LandingPageLayout>
  );
};

export default FormSubmissionPage;

export const getStaticProps: GetStaticProps = async () => {
  const _formData = await prisma.formSubmission.create({
    data: {
      email: formData?.email,
      name: formData?.name,
      company: formData?.company,
      employees: formData?.employees,
    },
  });
  return {
    props: {
      form: _formData || null,
    },
  };
};

`

And here is the FormSubmission (child) component, that should send the data to the parent: