GPT

Client Components

// app/components/UserForm.tsx 'use client'; import { useFormStatus } from 'react-dom'; import { createUser } from '@/app/actions/users'; export function UserForm() { const { pending } = useFormStatus(); return (

Prompt text

Original English text. Replace placeholders with your own details.

// app/components/UserForm.tsx
'use client';

import { useFormStatus } from 'react-dom';
import { createUser } from '@/app/actions/users';

export function UserForm() {
 const { pending } = useFormStatus();

 return (
 <form action={createUser}>
 <input
 name="name"
 placeholder="Name"
 required
 />
 <input
 name="email"
 type="email"
 placeholder="Email"
 required
 />
 <button type="submit" disabled={pending}>
 {pending ? 'Adding...' : 'Add User'}
 </button>
 </form>
 );
}

// app/components/DeleteButton.tsx
'use client';

import { useFormStatus } from 'react-dom';
import { deleteUser } from '@/app/actions/users';

interface Props {
 userId: number;
}

export function DeleteButton({ userId }: Props) {
 const { pending } = useFormStatus();

 return (
 <form action={deleteUser.bind(null, userId)}>
 <button type="submit" disabled={pending}>
 {pending ? 'Deleting...' : 'Delete'}
 </button>
 </form>
 );
}

Source & attribution

Instructa AI Prompts · Instructa AI Prompts

Source-listed license: CC-BY-4.0. Prompt text is preserved; titles and previews may be shortened for display. Source examples are not NexGateHub test results.

View original source ↗ · Source credits & licenses

Explore more prompts →