GPT

Client Component Implementation

'use client' import { useEffect, useState } from 'react'; import { getUsers, createUser, updateUser, deleteUser } from '@/app/actions/users'; export default function UserList() { const [users, setUsers] = useState([

Prompt text

Original English text. Replace placeholders with your own details.

'use client'
 
import { useEffect, useState } from 'react';
import { getUsers, createUser, updateUser, deleteUser } from '@/app/actions/users';
 
export default function UserList() {
 const [users, setUsers] = useState([]);
 
 useEffect(() => {
 const loadUsers = async () => {
 const data = await getUsers();
 setUsers(data);
 };
 loadUsers();
 }, []);
 
 const handleCreateUser = async (e) => {
 e.preventDefault();
 const formData = new FormData(e.target);
 await createUser({
 name: formData.get('name') as string,
 email: formData.get('email') as string,
 });
 const data = await getUsers();
 setUsers(data);
 e.target.reset();
 };
 
 return (
 <div>
 <form onSubmit={handleCreateUser}>
 <input name="name" placeholder="Name" required />
 <input name="email" type="email" placeholder="Email" required />
 <button type="submit">Add User</button>
 </form>
 
 <ul>
 {users.map((user) => (
 <li key={user.id}>
 {user.name} ({user.email})
 <button onClick={() => deleteUser(user.id)}>Delete</button>
 </li>
 ))}
 </ul>
 </div>
 );
}

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 →