Utilizing Props in Next.js with a Form Component

Question

Utilizing Props in Next.js with a Form Component

Currently, I am diving into the world of Nextjs and facing a challenge in passing a variable through a form component, and then further through its server action component. (I believe this is referred to as prop drilling, and I'm exploring if there's a more elegant solution.) This variable is crucial for a database query, and I'm following a tutorial to understand it better.

As a beginner, I may make super naive mistakes, so I appreciate your understanding. My main focus right now is on accessing the value of fetchuserid for my database entry:

Here is my page.tsx where I need to pass fetchuserid through AddBalanceForm:

import { fetchUser } from "@/app/components/fetchdata";
import type { UsersDb } from "@/app/components/definitions";
import ThisUserTable from "@/app/components/thisusertable";
import AddBalanceForm from "@/app/components/addbalanceform";

export default async function Page({ params: { slug } }) {
    const fetchuserid = Number(slug); 
    const user: UsersDb = await fetchUser(fetchuserid); 
    return (
      <main>
      <ThisUserTable user={user} />
      <AddBalanceForm fetchuserid={fetchuserid}/>
      </main>
    );
}

In addbalanceform.tsx:

`use client';
import { useFormState } from "react-dom";
import { userAddBalance } from "./adddata";
import SubmitButton  from "./submit-button";
import { EMPTY_FORM_STATE } from "./utils";
import { FieldError } from "./utils";
import { useToastMessage } from "./use-toast-message";
import { useFormReset } from "./useformreset";

export default function AddBalanceForm ({ fetchuserid }: { fetchuserid: number })  {

  const [formState, action] = useFormState(
    userAddBalance, 
    EMPTY_FORM_STATE,    
  );

  const noScriptFallback = useToastMessage(formState);
  const formRef = useFormReset(formState);

  return (
    <form action={action} className="flex flex-col gap-y-2" ref={formRef}>

      <label htmlFor="amount">amount</label>
      <textarea id="amount" name="amount" className="border-2" />
      <span className="text-xs text-red-400">
      <FieldError formState={formState} name="text" />
      </span>

      <SubmitButton label="Create" loading="Creating ..." />
      <span className="font-bold">{formState.message}</span>
      {noScriptFallback}
    </form>
  );
};

Regarding the server action:

'use server';
...

Now, I am unsure of how to pass the prop to the server action. I believe it needs to be handled in this block:

export default function AddBalanceForm ({ fetchuserid }: { fetchuserid: number })  {
  const [formState, action] = useFormState(
    userAddBalance, 
    EMPTY_FORM_STATE,    
  );
....

Thank you for any guidance you can provide. Much appreciated.

typescript next.js react-hooks

Answer 1

Answer №1

To enhance the AddBalanceForm functionality, ensure that the fetchuserid is included as a hidden input field for submission along with the form data:

1. Altering the Form Component

AddBalanceForm.tsx

'use client';

import { useFormState } from "react-dom";
import { userAddBalance } from "./adddata";
import SubmitButton from "./submit-button";
import { EMPTY_FORM_STATE } from "./utils";
import { FieldError } from "./utils";
import { useToastMessage } from "./use-toast-message";
import { useFormReset } from "./useformreset";

interface AddBalanceFormProps {
  fetchuserid: number;
}

export default function AddBalanceForm({ fetchuserid }: AddBalanceFormProps) {
  const [formState, action] = useFormState(
    (formState: FormState, formData: FormData) => userAddBalance(formState, formData, fetchuserid), // Incorporate fetchuserid in the action
    EMPTY_FORM_STATE
  );

  const noScriptFallback = useToastMessage(formState);
  const formRef = useFormReset(formState);

  return (
    <form action={action} className="flex flex-col gap-y-2" ref={formRef}>
      <input type="hidden" name="fetchuserid" value={fetchuserid} /> {/* Hidden input for fetchuserid */}

      <label htmlFor="amount">Amount</label>
      <textarea id="amount" name="amount" className="border-2" />
      <span className="text-xs text-red-400">
        <FieldError formState={formState} name="amount" />
      </span>

      <SubmitButton label="Create" loading="Creating ..." />
      <span className="font-bold">{formState.message}</span>

      {noScriptFallback}
    </form>
  );
}

2. Enhancing the Server Action

Revise the userAddBalance function to retrieve fetchuserid from the formData if communicated through a hidden field:

adddata.ts

'use server';

import { z } from 'zod';
import { revalidatePath } from 'next/cache';
import BetterSqlite3 from 'better-sqlite3';
import { FormState, toFormState } from './utils';

let db: BetterSqlite3.Database;
db = new BetterSqlite3("./coffeev1.db");

const addBalanceSchema = z.object({
  amount: z.coerce.number().min(1).max(1000),
});

export async function userAddBalance(
  formState: FormState,
  formData: FormData
) {
  // Extract fetchuserid from formData
  const fetchuserid = Number(formData.get('fetchuserid'));

  try {
    const { amount } = addBalanceSchema.parse({
      amount: formData.get('amount')
    });
    const amountInCents = amount * 100;

    const writeuser = db.prepare(`
      UPDATE user_registry
      SET kaffeestand = ?
      WHERE id = ?
    `);

    writeuser.run(amountInCents, fetchuserid);

  } catch (error) {
    console.error('Database Error:', error);
  }

  // Revalidate the cache for the page and redirect the user.
  revalidatePath(`/users/${fetchuserid}`);

  return toFormState('SUCCESS', 'Message created');
}

Answer 2

To enhance the AddBalanceForm functionality, ensure that the fetchuserid is included as a hidden input field for submission along with the form data:

1. Altering the Form Component

AddBalanceForm.tsx

'use client';

import { useFormState } from "react-dom";
import { userAddBalance } from "./adddata";
import SubmitButton from "./submit-button";
import { EMPTY_FORM_STATE } from "./utils";
import { FieldError } from "./utils";
import { useToastMessage } from "./use-toast-message";
import { useFormReset } from "./useformreset";

interface AddBalanceFormProps {
  fetchuserid: number;
}

export default function AddBalanceForm({ fetchuserid }: AddBalanceFormProps) {
  const [formState, action] = useFormState(
    (formState: FormState, formData: FormData) => userAddBalance(formState, formData, fetchuserid), // Incorporate fetchuserid in the action
    EMPTY_FORM_STATE
  );

  const noScriptFallback = useToastMessage(formState);
  const formRef = useFormReset(formState);

  return (
    <form action={action} className="flex flex-col gap-y-2" ref={formRef}>
      <input type="hidden" name="fetchuserid" value={fetchuserid} /> {/* Hidden input for fetchuserid */}

      <label htmlFor="amount">Amount</label>
      <textarea id="amount" name="amount" className="border-2" />
      <span className="text-xs text-red-400">
        <FieldError formState={formState} name="amount" />
      </span>

      <SubmitButton label="Create" loading="Creating ..." />
      <span className="font-bold">{formState.message}</span>

      {noScriptFallback}
    </form>
  );
}

2. Enhancing the Server Action

Revise the userAddBalance function to retrieve fetchuserid from the formData if communicated through a hidden field:

adddata.ts

'use server';

import { z } from 'zod';
import { revalidatePath } from 'next/cache';
import BetterSqlite3 from 'better-sqlite3';
import { FormState, toFormState } from './utils';

let db: BetterSqlite3.Database;
db = new BetterSqlite3("./coffeev1.db");

const addBalanceSchema = z.object({
  amount: z.coerce.number().min(1).max(1000),
});

export async function userAddBalance(
  formState: FormState,
  formData: FormData
) {
  // Extract fetchuserid from formData
  const fetchuserid = Number(formData.get('fetchuserid'));

  try {
    const { amount } = addBalanceSchema.parse({
      amount: formData.get('amount')
    });
    const amountInCents = amount * 100;

    const writeuser = db.prepare(`
      UPDATE user_registry
      SET kaffeestand = ?
      WHERE id = ?
    `);

    writeuser.run(amountInCents, fetchuserid);

  } catch (error) {
    console.error('Database Error:', error);
  }

  // Revalidate the cache for the page and redirect the user.
  revalidatePath(`/users/${fetchuserid}`);

  return toFormState('SUCCESS', 'Message created');
}

Utilizing Props in Next.js with a Form Component

Answer №1

Similar questions

Creating an object type that includes boolean values, ensuring that at least one of them is true

The image placeholder is missing

Go to a specific component located in a different module within Angular

Vercel and Firebase Realtime Database causing snapshot.val() to return null during build deployment

NextJS custom credit card form with recurring payments using Paypal

Guide on implementing a shared layout in NextJS with Auth0 integration

Following the creation of the image, the functionality of the Next.js app seems to be compromised

TypeScript: displaying parameters

Nextjs - resolving the issue of shopping carts displaying incorrect total amounts

Comparable to LINQ SingleOrDefault()

I need to import a Jest mock into several different test files - how can I accomplish this?

AngularFire 2 dispatching email for password reset

The React Hook useEffect is reporting a missing dependency: 'Navigation'

What is the method for developing a Typescript-connected High-Order React Component with Redux?

Nextjs google places autocomplete not providing accurate suggestions

Steps for deploying a NextJs Project on the cPanel of a free hosting platform

Having difficulty leveraging npm modules in TypeScript

When attempting to access http://localhost:3000/highLightTitle.png using Next.js, a 404 error (Not Found) was encountered in the content

The collapsible Navbar in flowbite-react is consistently collapsed

Leverage information retrieved from getServerSideProps in the custom document of a Next.js application