GPT

React Component Examples

// src/components/UserList.tsx import { useState } from 'react'; import { useUsers, useCreateUser, useDeleteUser } from '../hooks/useUsers'; import type { NewUser } from '../db/schema'; export function UserList() { con

Prompt text

Original English text. Replace placeholders with your own details.

// src/components/UserList.tsx
import { useState } from 'react';
import { useUsers, useCreateUser, useDeleteUser } from '../hooks/useUsers';
import type { NewUser } from '../db/schema';

export function UserList() {
 const [newUser, setNewUser] = useState<NewUser>({
 name: '',
 email: '',
 });

 const { data: users, isLoading, error } = useUsers();
 const createUser = useCreateUser();
 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 }))}
 type="email"
 placeholder="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>
 );
}

// src/components/UserDetail.tsx
import { useUser, useUpdateUser } from '../hooks/useUsers';
import type { User } from '../db/schema';

interface Props {
 id: number;
}

export function UserDetail({ id }: Props) {
 const { data: user, isLoading, error } = useUser(id);
 const updateUser = useUpdateUser();

 if (isLoading) return <div>Loading...</div>;
 if (error) return <div>Error: {error.message}</div>;
 if (!user) return <div>User not found</div>;

 const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
 e.preventDefault();
 const formData = new FormData(e.currentTarget);
 const updatedUser: User = {
 id: user.id,
 name: formData.get('name') as string,
 email: formData.get('email') as string,
 };
 updateUser.mutate(updatedUser);
 };

 return (
 <div>
 <h2>Edit User</h2>

 <form onSubmit={handleSubmit}>
 <input
 name="name"
 defaultValue={user.name}
 placeholder="Name"
 required
 />
 <input
 name="email"
 type="email"
 defaultValue={user.email}
 placeholder="Email"
 required
 />
 <button type="submit" disabled={updateUser.isPending}>
 Update User
 </button>
 </form>
 </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 →