GPT

React Component Example

// src/components/UserList.tsx import { useState } from 'react'; import { useUsers, useCreateUser, useUpdateUser, useDeleteUser } from '../hooks/useUsers'; export function UserList() { const [newUser, setNewUser] = use

Prompt text

Original English text. Replace placeholders with your own details.

// src/components/UserList.tsx
import { useState } from 'react';
import { useUsers, useCreateUser, useUpdateUser, useDeleteUser } from '../hooks/useUsers';

export function UserList() {
 const [newUser, setNewUser] = useState({ name: '', email: '' });
 
 const { data: users, isLoading, error } = useUsers();
 const createUser = useCreateUser();
 const updateUser = useUpdateUser();
 const deleteUser = useDeleteUser();

 if (isLoading) return <div>Loading...</div>;
 if (error) return <div>Error: {error.message}</div>;

 const handleSubmit = (e: React.FormEvent) => {
 e.preventDefault();
 createUser.mutate(newUser, {
 onSuccess: () => setNewUser({ name: '', email: '' }),
 });
 };

 return (
 <div>
 <h2>Users</h2>

 <form onSubmit={handleSubmit}>
 <input
 value={newUser.name}
 onChange={(e) => setNewUser(prev => ({ ...prev, name: e.target.value }))}
 placeholder="Name"
 required
 />
 <input
 value={newUser.email}
 onChange={(e) => setNewUser(prev => ({ ...prev, email: e.target.value }))}
 placeholder="Email"
 type="email"
 required
 />
 <button type="submit" disabled={createUser.isPending}>
 Add User
 </button>
 </form>

 <ul>
 {users?.map((user) => (
 <li key={user.id}>
 {user.name} ({user.email})
 <button
 onClick={() => deleteUser.mutate(user.id)}
 disabled={deleteUser.isPending}
 >
 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 →